Flutter基础之ListView的基本使用

简介

Flutter作为史上最强UI框架，拥有很多丰富的UI组件，为仿抖音项目的实战，本文简略介绍一下根底组件运用最多的列表ListView的用法。

构造函数

ListView({
  super.key, 
  super.scrollDirection,//滑动方向
  super.reverse,//列表反向
  super.controller, //控制器
  super.primary,
  super.physics, //系数
  super.shrinkWrap,//item总长度相关
  super.padding,//内边距
  this.itemExtent,
  this.prototypeItem,
  bool addAutomaticKeepAlives = true,//主动保存页面状况
  ..................
  List<Widget> children = const <Widget>[], //item集合
  int? semanticChildCount,
})

常用特点介绍

常用特点如下表所示

底子运用

1. ListView.builder

ListView.builder(
  itemBuilder: (BuildContext context, int index) {
    RouteBean bean = RouteData.getElements()[index];
      return itemWidget(bean); //每个item的布局
        },
  itemCount: RouteData.getElements().length
)
//自定义Item布局
Widget itemWidget(bean){
    return Padding(padding: const EdgeInsets.only(
        top:10,left: 20,right: 20),child: Container(
        constraints: const BoxConstraints(maxWidth: double.infinity,maxHeight: 60),
        child: TextButton(
          style:ButtonStyle(backgroundColor: MaterialStatePropertyAll(Theme.of(context).primaryColor)) ,
          child: Text(
            bean.name,
            style: const TextStyle(fontSize: 20,color: Colors.white),
          ),
          onPressed: ()=>Navigator.pushNamed(context, bean.route,arguments:bean.name),
        )
    ),);

ListView.builder 一般用于item数量不确定的情况，或者网络获取数据的列表。经过自定义Item布局来实现列表的展现。

作用如下：

1. ListView.separated

ListView.separated对比ListView.builder来说，多了一个separatorBuilder特点，能够在列表中的每个Item直接添加一个自定义分割线。由于代码较多，这儿只展现部分代码。

ListView.separated(
  itemBuilder: (BuildContext context, int index) {
       RouteBean bean = RouteData.getElements()[index];
       return itemWidget(bean)
       },
  separatorBuilder: (context, index) { //自定义分割线
       return const Divider(
         thickness: 10, // 高度  10
         color: Color(0xFFF80D05),
       );
     },

作用如下：

3.ListView(children: [],) .这样运用合适item数量固定的，后期不会添加的情况。这样场景底子很少运用。

添加固定头部

咱们都知道在Android中，假如要给列表添加头部不太简单实现，特别是前期的ListView，底子就不支撑添加头部，直到后期官方推出的RecyclewView才支撑添加。可是关于FLutter来说，添加头部组件组件非常简单。

ListView.separated(
  itemBuilder: (BuildContext context, int index) {
       RouteBean bean = RouteData.getElements()[index];
       if(index == 0){
          return  Center(child: Text("我是ListView头部",style:
                      TextStyle(fontWeight: FontWeight.bold,fontSize: 20),),);
        }else{
          return itemWidget(bean);
        };
     },
  separatorBuilder: (context, index) {
       return const Divider(
         thickness: 10,
         color: Color(0xFFF80D05),
       );
     },

作用如下：

咱们再ListView的item构建地方，添加了一个if判断，假如下标等于0时，返回一个头部组件，否则返回item布局，这样做看着没有什么问题，可是现实上会少了一个下标为0 的根底组件选项，咱们能够当下标为0时，添加一个Column组件来处理这个问题。

 ListView.separated(
            itemBuilder: (BuildContext context, int index) {
              RouteBean bean = RouteData.getElements()[index];
               if(index == 0){
                 return  Column(
                   children: [
                     Center(child: Text("我是ListView头部",style: 
                      TextStyle(fontWeight: FontWeight.bold,fontSize: 20),),),
                     SizedBox(width: double.infinity,child: itemWidget(bean))
                   ],
                 );
              }else{
                 return itemWidget(bean);
              };
            }

Column()是竖直排列的组件，内部组件依次从上到下排列。相似线性布局。Center()组件child居中显现，SizedBox（）用来固定尺寸的组件，更多根底组件这儿就不详细叙说了，同学能够自行查看网页。

易错点

在开发中假如当需要在Column中运用ListView展现页面时，会呈现页面无法显现问题。这是由于ListView直接在Column中运用无法测量高度导致，需要在ListView外面添加一个Expend组件处理这个问题。感兴趣的读者能够着手试试。

总结

ListView作为Flutter中运用频率较高的根底组件，读者应该熟记常用特点。经过源码剖析加深对ListView的了解，本文只是介绍简略用法。以便在后面的项目实战中运用。

后续会运用Flutter开发仿一个抖音的项目。感兴趣的同学能够点击重视哦！