Flutter笔记37：ListView用法

ListView滚动列表组件在开发中非常常用，在诸如商品列表、会员列表等涉及到滚动的都需要使用ListView，这里详细记录了ListView的四种构造方法，同时，顺便详细记录了ListTile的属性方法：

用法一，ListView() 适用于少量数据：

    return ListView(
      children: [
        ListTile(
          leading: Icon(Icons.person),
          title: Text('列表1'),
        ),
        //分割线
        Divider(
          height: 1.0,
          color: Colors.blue,
        ),
        ListTile(
          leading: Icon(Icons.person),
          title: Text('列表2'),
        ),
        //分割线
        Divider(
          height: 1.0,
          color: Colors.blue,
        ),
        ListTile(
          leading: Icon(Icons.person),
          title: Text('列表3'),
        ),
        //分割线
        Divider(
          height: 1.0,
          color: Colors.blue,
        ),
        ListTile(
          leading: Icon(Icons.person),
          title: Text('列表4'),
        ),
      ],
    );

用法二，ListView.builder() 这种用法最多，大量数据时建议用这种方法，Flutter对它进行的加载优化：

    return ListView.builder(
      //垂直和水平两个方向
      scrollDirection: Axis.vertical,
      //列表个数
      itemCount: 10,
      //事先定义好每条高度，能够让item加载更高效
      itemExtent: 50.0,
      //child高度会适配item填充内容的高度，如果不适配，child内容高度超出，就会造成内容溢出，溢出就会出现警告 警告效果详见：http://www.5imoban.net/jiaocheng/hbuilder/2019/1108/3631.html
      shrinkWrap: false,
      //physics滑动类型
      //physics: AlwaysScrollableScrollPhysics()  总是可以滑动
      //physics: NeverScrollableScrollPhysics()   禁止滚动
      //physics: BouncingScrollPhysics()  内容超过一屏，上拉有回弹效果
      //physics: ClampingScrollPhysics()  包裹内容 不会有回弹
      physics: ClampingScrollPhysics(),
      //cacheExtent预加载区域，设置未0，则不会预加载
      cacheExtent: 30.0,
      //滑动监听，多用来做上拉加载，监听滚动距离，Flutter上拉加载下拉刷新详见：http://www.5imoban.net/jiaocheng/hbuilder/2020/1010/4043.html
      controller: _controller,
      //默认false，是否禁用controller滑动监听
      primary: false,
      itemBuilder: (BuildContext context, int index) {
        return ListTile(
          title: Text('title$index'),
          //前置图标
          leading: Icon(Icons.access_time),
          subtitle: Text('子标题'),
          //后置图标
          trailing: Icon(Icons.arrow_forward),
          //是否显示三行
          isThreeLine: false,
          //内边距
          contentPadding: EdgeInsets.all(10.0),
          //是否启用，禁用后点击长按无效
          enabled: true,
          //是否选中，选中列表会有颜色
          selected: false,
          hoverColor: Colors.orange,
          onTap: () {
            print('Tap');
          },
          onLongPress: () {
            print('LongPress');
          },
        );
      },
    );

用法三，ListView.separated()  带分割线构造方法：

   return ListView.separated(
      //分割线构造器
      separatorBuilder: (BuildContext context, int index) => Divider(
        height: 1.0,
        color: Colors.blue,
      ),
      //垂直和水平两个方向
      scrollDirection: Axis.vertical,
      //列表个数
      itemCount: 10,
      //child高度会适配item填充内容的高度，如果不适配，child内容高度超出，就会造成内容溢出，溢出就会出现警告 警告效果详见 http://www.5imoban.net/jiaocheng/hbuilder/2019/1108/3631.html
      shrinkWrap: false,
      controller: _controller,
      //默认false，是否禁用controller滑动监听
      primary: false,
      itemBuilder: (BuildContext context, int index) {
        return ListTile(
          title: Text('title$index'),
          //前置图标
          leading: Icon(Icons.access_time),
          subtitle: Text('子标题'),
          //后置图标
          trailing: Icon(Icons.arrow_forward),
          //是否显示三行
          isThreeLine: false,
          //内边距
          contentPadding: EdgeInsets.all(10.0),
          //是否启用，禁用后点击长按无效
          enabled: true,
          //是否选中，选中列表会有颜色
          selected: false,
          hoverColor: Colors.orange,
          onTap: () {
            print('Tap');
          },
          onLongPress: () {
            print('LongPress');
          },
        );
      },
    );

方法四：ListView.custom()  自定义的ListView

    return 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('item$index'),
        );
      }, childCount: 10)
    );

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！