Flutter ListView

ListView 是一个线性布局的widgets 列表.
ListView -extends->BoxScrollView -extends->ScrollView -extends->StatelessWidgetjava

在构建ListView时有4中选择：

利用ListView构造函数。此构造函数适合于具备少许子元素的列表视图，由于上种方法建立的ListView 会将子Item一次性绘制出来，若是子Item 多的话，会形成页面卡顿。web
ListView.builder利用IndexedWidgetBuilder来按需构造。这个构造函数适合于具备大量（或无限）子视图的列表视图，由于构建器只绘制可见的Item。算法
使用ListView.separated构造函数，采用两个IndexedWidgetBuilder：itemBuilder根据须要构建子项separatorBuilder相似地构建出如今子项之间的分隔符子项。此构造函数适用于具备固定数量的子控件的列表视图。less
使用ListView.custom的SliverChildDelegate构造，它提供了定制子模型的其余方面的能力。例如，SliverChildDelegate能够控制用于估计实际上不可见的孩子的大小的算法。ide

1 加载少许数据时可使用

本方法建立的ListView ，会将子Item一次性绘制出来svg

ListView(
       //item 高度会适配 item填充的内容的高度
       shrinkWrap: true,
       padding: EdgeInsets.all(20.0),
       children: <Widget>[
         new Text(
           "test",
           style: new TextStyle(fontSize: 18.0, color: Colors.red),
         ),
         new Text(
           "${list[0].age}",
           style: new TextStyle(fontSize: 18.0, color: Colors.green),
         ),
         new Text(
           "${list[0].content}",
           style: new TextStyle(fontSize: 18.0, color: Colors.blue),
         ),
       ],
     );

2 ListView.builder() 经常使用

假若有 1000 个列表，初始渲染时并不会全部都渲染，而只会特定数量的 item函数

ListView.builder(
     // item 的个数
     itemCount: 20,
     //设置滑动方向 Axis.horizontal 水平 默认 Axis.vertical 垂直
     scrollDirection: Axis.vertical,
     //内间距
     padding: EdgeInsets.all(10.0),
     //是否倒序显示 默认正序 false 倒序true
     reverse: false,
     //false，若是内容不足，则用户没法滚动 而若是[primary]为true，它们老是能够尝试滚动。
     primary: true,
     //肯定每个item的高度 会让item加载更加高效
     itemExtent: 50.0,
     //item 高度会适配 item填充的内容的高度 多用于嵌套listView中 内容大小不肯定 好比 垂直布局中 前后放入文字 listView （须要Expend包裹不然没法显示无穷大高度 可是须要肯定listview高度 shrinkWrap使用内容适配不会） 文字
     shrinkWrap: true,
     //滑动类型设置
     //new AlwaysScrollableScrollPhysics() 老是能够滑动 NeverScrollableScrollPhysics禁止滚动 BouncingScrollPhysics 内容超过一屏 上拉有回弹效果 ClampingScrollPhysics 包裹内容 不会有回弹
     // cacheExtent: 30.0, //cacheExtent 设置预加载的区域 cacheExtent 强制设置为了 0.0，从而关闭了“预加载”
     physics: new ClampingScrollPhysics(),
     //滑动监听
     // controller ,
     itemBuilder: (BuildContext context, int index) { 
 
   
       //设置子条目
       return ListTile(
         title: Text("title $index"),
         // item 标题
         leading: Icon(Icons.keyboard),
         // item 前置图标
         subtitle: Text("subtitle $index"),
         // item 副标题
         trailing: Icon(Icons.keyboard_arrow_right),
         // item 后置图标
         isThreeLine: false,
         // item 是否三行显示
         dense: true,
         // item 直观感觉是总体大小
         contentPadding: EdgeInsets.all(10.0),
         // item 内容内边距
         enabled: true,
         onTap: () { 
 
   
           print('点击:$index');
         },
         // item onTap 点击事件
         onLongPress: () { 
 
   
           print('长按:$index');
         },
         // item onLongPress 长按事件
         selected: false, // item 是否选中状态
       );
     },
   ),

ListTile 是Flutter 提供好的经常使用widget ，包括文字，icon，点击事件布局

3 ListView.separated()

带分割线的item，separated 相比较于 builder，又多了一个参数 separatorBuilder ，用于控制列表各个元素的间隔如何渲染。学习

ListView.separated(
              scrollDirection: Axis.vertical,
              itemCount: 100, // item 的个数
              separatorBuilder: (BuildContext context, int index) => Divider(height:1.0,color: Colors.blue),  // 添加分割线
              itemBuilder: (BuildContext context, int index) { 
 
   
                return ListTile(
                  title:  Text("title $index"), // item 标题
                  leading: Icon(Icons.keyboard), // item 前置图标
                  subtitle: Text("subtitle $index"), // item 副标题
                  trailing: Icon(Icons.keyboard_arrow_right),// item 后置图标
                  isThreeLine:false,  // item 是否三行显示
                  dense:true,                // item 直观感觉是总体大小
                  contentPadding: EdgeInsets.all(10.0),// item 内容内边距
                  enabled:true,
                  onTap:(){ 
 
   print('点击:$index');},// item onTap 点击事件
                  onLongPress:(){ 
 
   print('长按:$index');},// item onLongPress 长按事件
                  selected:false,     // item 是否选中状态
                );
              },
            ),

4 ListView.custom

ListView.custom(
            scrollDirection: Axis.vertical,
            childrenDelegate:
                SliverChildBuilderDelegate((BuildContext context, int index) { 
 
   
              return Container(
                height: 50.0,
                alignment: Alignment.center,
                color: Colors.lightBlue[100 * (index % 9)],
                child: Text('list item $index'),
              );
            }, childCount: 50),
          ),

本公众号会首发系列专题文章，付费的视频课程会在公众号中免费刊登，在你上下班的路上或者是睡觉前的一刻，本公众号都是你浏览知识干货的一个小选择，收藏不如行动，在那一刻，公众号会提示你该学习了。ui

【##】 目前在西瓜视频上免费刊登 Flutter 系列教程，每日更新，欢迎关注接收提醒点击查看提示