关于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 = 0flutter: without builder index = 1flutter: without builder index = 2flutter: without builder index = 3flutter: without builder index = 4flutter: without builder index = 5flutter: without builder index = 6flutter: without builder index = 7flutter: without builder index = 8flutter: without builder index = 9flutter: builder index = 0flutter: builder index = 1flutter: builder index = 2flutter: builder index = 3flutter: builder index = 4flutter: builder index = 5flutter: builder index = 6flutter: 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查看，并且能够下载下来运行并体验。