关于ios:Flutter-211Flutter手把手教程UI布局和Widget列表ListView

作者 | 弗拉德
起源 | 弗拉德（公众号：fulade_me)

ListView

ListView是在挪动端十分常见的控件，在大多数的展现场景中都离不开 ListView。在Flutter 中对 ListView 的封装也十分好，简略几行代码就能够满足咱们布局一个滚动列表的需要。

先来看一下构造函数：

ListView({
    /// key
    Key key,
    /// 布局方向
    Axis scrollDirection = Axis.vertical,
    /// 是否 倒序显示
    bool reverse = false,
    /// ScrollController 用于管制滚动地位和监听滚动事件
    ScrollController controller,
    /// 是否应用默认的 controller
    bool primary,
    /// 滚动成果  能够通过此参数 设置 ListView 不可滚动
    ScrollPhysics physics,
    /// 是否依据子控件的总长度来设置 ListView 的长度，默认值为 false
    bool shrinkWrap = false,
    ///  padding
    EdgeInsetsGeometry padding,
    /// 子控件高度
    this.itemExtent,
    // 在 敞开屏幕时 是否开释子控件
    bool addAutomaticKeepAlives = true,
    /// 是否 防止列表项重绘
    bool addRepaintBoundaries = true,
    /// 该属性示意是否把子控件包装在 IndexedSemantics 里，用来提供无障碍语义
    bool addSemanticIndexes = true,
    // 预加载子控件的个数
    double cacheExtent,
    /// 子控件数组
    List<Widget> children = const <Widget>[],
    /// 子控件的个数
    int semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
})

builder

Flutter给咱们提供了四种结构 ListView 的办法，有ListView()、ListView.builder()、ListView.separated()、ListView.custom()、

动态构造方法和动静构造方法
ListView() 是初始化的时候须要确定数据源的大小，一旦初始化胜利后不能再次动静的插入数据。
ListView.builder()、ListView.separated()、ListView.custom()能够动静的插入数据，且可能更小的节俭内存空间。
咱们来看以下代码：

Flexible(
    child: ListView(
        children: List.generate(
            10,
            (index) {print("without builder index = $index");
                return Container(
                height: 60,
                child: Card(
                        color: Colors.blue,
                        child: Center(child: Text("$index")),
                    ),
                );
            },
        ),
    ),
),
Flexible(
    child: ListView.builder(
        itemCount: 10,
        itemExtent: 60,
        itemBuilder: (BuildContext contenxt, int index) {print("builder index = $index");
            return Container(
                height: 60,
                child: Card(
                color: Colors.red,
                child: Center(child: Text("$index")),
                ),
            );
        },
    ),
),

同样是须要初始化 10 个子控件，咱们别离在 List.generate 办法和 itemBuilder 办法中做了打印操作
输入如下：

flutter: without builder index = 0
flutter: without builder index = 1
flutter: without builder index = 2
flutter: without builder index = 3
flutter: without builder index = 4
flutter: without builder index = 5
flutter: without builder index = 6
flutter: without builder index = 7
flutter: without builder index = 8
flutter: without builder index = 9
flutter: builder index = 0
flutter: builder index = 1
flutter: builder index = 2
flutter: builder index = 3
flutter: builder index = 4
flutter: builder index = 5
flutter: builder index = 6
flutter: builder index = 7

由输入的 log 可见，builder办法只初始化了 7 个子控件，ListView()办法残缺的初始化了 10 个子控件。
builder办法是 在须要应用的时候 才会初始化，当页面滚动到第 9 个子控件的时候，这个时候才会初始化第 9 个子控件。
这样做的劣势是：当咱们的列表数据量很大的时候(比如说有成千盈百个数据)，咱们只初始化几个来满足页面的显示需要，其余的控件在须要的时候，再做初始化这样就大大的帮忙咱们节俭内存空间。

scrollDirection

ListView同时具备了程度布局和垂直布局的能力，咱们只须要给 scrollDirection 设置不同的参数即可。
scrollDirection接管的参数值有两个 Axis.vertical 和Axis.horizontal

Axis.vertical
成果如下

Axis.horizontal
成果如下

reverse

参数 reverse 能够管制列表是按正序显示还是倒序显示。

reverse = true
示意倒序显示

reverse = false
示意正序显示

physics

某些状况下咱们并不想要 ListView 能够滚动，只有把 physics 设置为 NeverScrollableScrollPhysics 即可。
physics还有其余两个比拟重要的值：
ClampingScrollPhysics：在 Android 设施上有微光成果。
BouncingScrollPhysics：在 iOS 设施上有弹性成果。

separated

在 ListView.separated() 构造函数中，咱们能够传入一个自定义的 Divider 来作作为分隔的款式
这里咱们来看一下 Divider 都有哪些参数：

const Divider({
    /// key
    Key key,
    // 高度
    this.height,
    /// 色彩的 高度
    this.thickness,
    /// 结尾处的缩进
    this.indent,
    /// 完结处的缩进 
    this.endIndent,
    /// 色彩
    this.color,
})

height = 0

height = 10

thinkness = 10

indent = 100

end = 100

想体验以上示例的运行成果，能够到我的 Github 仓库我的项目 flutter_app->lib->routes->listview_page.dart 查看，并且能够下载下来运行并体验。