直播网站程序源码，Flutter：列表布局摘要

云豹网络科技

于 2023-07-19 14:12:33 发布

阅读量114

点赞数

CC 4.0 BY-SA版权

文章标签： flutter

原文链接：https://blog.csdn.net/a526001650a/article/details/127391917?spm=1001.2014.3001.5502

本文介绍了Flutter中三种ListView布局方式：1)使用ListView.builder适用于大量item，动态创建；2)ListView.separated添加了item间的分割线；3)ListView适用于少量item，需预先构建所有item。这些方法常用于列表展示和滚动交互场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直播网站程序源码，Flutter：列表布局摘要
方式1(推荐，适用大量item，动态创建item)：

ListView.builder( //列表布局
  scrollDirection: Axis.vertical,  //(默认)vertical垂直排列，horizontal水平排列
  itemCount: 总个数,               //item总个数
  itemExtent: 高度值,             //item高度(vertical)或宽度(horizontal)
  itemBuilder: (BuildContext context, int index) { //列表滚动到index位置时，才构建此item
    return item布局;
  }
)

方式2(效果同方式2，item间添加分割线)：

ListView.separated( //列表布局
  ... //省略其他相同属性
  itemCount: 总个数,               //item总个数
  itemBuilder: (BuildContext context, int index) { //列表滚动到index位置时，才构建此item
    return item布局;
  }
  separatorBuilder: (BuildContext context, int index) { //分割器构造器
    return Divider(color: Colors.black);  //Divider为分割线
  }
}

方式3(适用少量item)：

ListView( //列表布局
  scrollDirection: Axis.vertical,  //(默认)vertical垂直排列，horizontal水平排列
  itemExtent: 高度值,              //item高度(vertical)或宽度(horizontal)
//prototypeItem: 高度值,           //效果等同itemExtent，与itemExtent互斥
  shrinkWrap: false,               //true时累加item总长度并设置ListView长度，(默认)false占用最大空间
  children: <Widget>[              //item布局列表，提前将所有item构建好
    ...
  ]
)