首页 > 建站教程 > APP开发,混合APP >  Flutter笔记37:ListView用法正文

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)
    );