【Flutter 2-11】Flutter手把手教程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()	动态构造方法 须要传入SliverChildDelegate来作动态生成

静态构造方法和动态构造方法
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查看，而且能够下载下来运行并体验。

---