flutter Listview可滚动组件

Listview

垂直布局

当布局使用column的时候也是一种垂直布局，但是当元素超出屏幕范围会溢出报错，也就是说使用column是固定的展示范围，但是使用Listview的时候,是一个可以滑动的列表,也就是显示内容可以向下滚动
在垂直列表的布局中，宽度是自适应的，高度是需要自定义的
可以通过children: const <Widget>[]定义列表内的内容
如:

this.leading, // item 前置图标
this.title, // item 标题
this.subtitle, // item 副标题
this.trailing, // item 后置图标
this.isThreeLine = false, // item 是否三行显示
this.dense, // item 直观感受是整体大小
this.contentPadding, // item 内容内边距
this.enabled = true,
this.onTap, // item onTap 点击事件
this.onLongPress, // item onLongPress 长按事件
this.selected = false, // item 是否选中状态

ListView(
      shrinkWrap: true,
      children: const <Widget>[
        ListTile(   //添加内容
          leading: Image(  //添加图片控件
            image: NetworkImage(
                "https://picx1.zhimg.com/80/v2-543f272e48de443345fc82a82713afcf_400x224.png"),
            fit: BoxFit.cover,
          ),
          title: Text("从入围赛到世界之巅，DRX 击败 T1 夺 S12 总冠军，对此你有什么想说的？"),  //添加标题
        ),)

shrinkWrap根据子组件的长度来定义listview的长度,默认是false

水平滚动列表

水平列表需要在ListView中添加scrollDirection: Axis.horizontal,
scrollDirection的默认属性是Axis.vertical就是垂直布局
在水平列表的组件中高度是自适应的，但是宽度需要添加，
如果我们想要限制列表的高度则可以在listview外层设置Container或者sizebox现在容器大小

动态列表

所谓的动态列表就是内容是动态生成的,而不是固定的
可以把接收到的数据,存储在一个列表List<Widget>[]里面,从而根据接收到的数据去生成内容大概如下

  List<Widget> _initlistdata(){
      List<Widget> tmplist=[];    //创建一个存储widget的列表
      for(var i=0;i<list.length;i++){    //list为接收到的数据,在头文件引入
        tmplist.add(ListTile(
          leading: Image.network("${list[i]["cover"]}",fit: BoxFit.cover,),
          title: Text("${list[i]["name"]}"),
          subtitle: Text("${list[i]["teacherName"]}"),   //向list内依次添加widget
        ));
      }
      return tmplist;
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(children: _initlistdata(),);  //children为_initlistdata()返回的列表,就是上面的tmplist
  }

ListView.builder() 渲染长列表数据

直接使用 ListView(children: List) 的优点是简单边界，直接生成一个 List 的列表，然后赋值给 ListView 的 children 参数即可

缺点是整个 ListView 是没有回收机制的，会一次性创建出所有的子项，构建完成整个 ListView。

这意味着一旦列表长度非常长，比如 无限滚动列表的场景中，列表长度非常长，直接创建 ListView 的所有子项可能会有内存问题，过高的内存会引起 Crash

参数

1.ListView.builder 的参数 itemCount
itemCount 这个参数声明了 list 的长度，这个值表明 ListView 中会存在多少个 item 子项

2.ListView.builder 的参数 itemBuilder
从 itemBuilder 的表面含以上也能够知道它是用来构造每个子项组件的，它的类型是 IndexedWidgetBuilder，其实是一个方法，接受 context 和 index 两个参数。

context：构造的上下文
index: 当前索引

class list_builder extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.builder(
        itemCount: list.length,
        itemBuilder:(context,index){   //可以理解为一个遍历函数,context为list内容,index为list的索引
            return ListTile(
              leading: Image.network("${list[index]["cover"]}"),
              title: Text("${list[index]["name"]}"),
              subtitle: Text("${list[index]["teacherName"]}"),
            );
        });
  }