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

Column()是竖直排列的组件，内部组件依次从上到下排列。类似线性布局。Center()组件child居中显示，SizedBox（）用来固定尺寸的组件，更多基础组件这里就不详细叙述了，同学可以自行查看网页。

易错点

在开发中如果当需要在Column中使用ListView展示页面时，会出现页面无法显示问题。这是因为ListView直接在Column中使用无法测量高度导致，需要在ListView外面添加一个Expend组件解决这个问题。感兴趣的读者可以动手试试。

总结

ListView作为Flutter中使用频率较高的基础组件，读者应该熟记常用属性。通过源码分析加深对ListView的了解，本文只是介绍简单用法。以便在后面的项目实战中使用。

后续会使用Flutter开发仿一个抖音的项目。感兴趣的同学可以点击关注哦！

最后

如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。

如果你没有方向，这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》，帮大家将杂乱、零散、碎片化的知识进行体系化的整理，让大家系统而高效地掌握Android开发的各个知识点。
在这里插入图片描述
相对于我们平时看的碎片化内容，这份笔记的知识点更系统化，更容易理解和记忆，是严格按照知识体系编排的。