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,
  
})

常用属性介绍

常用属性如下表所示

属性类型概述

scrollDirection	Axis	Axis.horizontal ：水平列表，Axis.vertical：垂直列表
padding	EdgeInsetsGeometry	内边距
reverse	bool	组件反向排序
children	List	列表元素
shrinkWrap	bool	是否根据item高度来决定总高度

基本使用

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布局来实现列表的展示。

效果如下：

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