Flutter：如何用ListView Builder实现数据4条分组展示？

一、修改现有ListView.builder实现分组 #

要实现每4条数据放入一个独立Container，核心是先把数据源拆分成多个子组，再针对每个组构建Container：

1. 拆分数据源为分组列表 #

先写一个计算属性，把原始数据_data分割成每4条一组的二维列表：

List<List<YourDataModel>> get groupedData {
  List<List<YourDataModel>> groups = [];
  if (_data == null || _data!.isEmpty) return groups;
  
  // 按步长4拆分数据
  for (int i = 0; i < _data!.length; i += 4) {
    int endIndex = (i + 4) > _data!.length ? _data!.length : i + 4;
    groups.add(_data!.sublist(i, endIndex));
  }
  return groups;
}

注意：把YourDataModel替换成你实际的数据模型类

2. 修改ListView.builder构建分组UI #

调整ListView的itemCount为分组数量，每个item对应一个包含4条数据的Container：

ListView.builder(
  shrinkWrap: true,
  itemCount: groupedData.length,
  itemBuilder: (context, groupIndex) {
    final currentGroup = groupedData[groupIndex];
    
    // 每个分组的外层Container，可自定义样式（边框、间距等）
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 10),
      padding: const EdgeInsets.all(8),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey.shade300),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Column(
        children: currentGroup.map((data) {
          String name = data.name.toString() ?? '';
          var formattedName = StringUtils.convertToTitleCase(name);
          var leadId = data.leadId.toString();
          
          // 复用原有的单条数据UI，调整分割线只显示在组内条目之间
          return Column(
            children: [
              Padding(
                padding: const EdgeInsets.only(left: 10, right: 10, top: 5, bottom: 5),
                child: Row(
                  children: [
                    GestureDetector(
                      onTap: () {},
                      child: SizedBox(
                        height: 30,
                        width: 33,
                        child: randomAvatar(
                          DateTime.now().toIso8601String(),
                          height: 60,
                          width: 62,
                        ),
                      ),
                    ),
                    const SizedBox(width: 10),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        SizedBox(
                          width: MediaQuery.of(context).size.width * 0.4,
                          child: Text(
                            formattedName,
                            overflow: TextOverflow.ellipsis,
                            style: UtilsMethods.mediumTextStyle(AppColor.darkGrey, 13),
                          ),
                        ),
                        Text(
                          leadId,
                          style: UtilsMethods.mediumTextStyle(AppColor.darkGrey, 10),
                        ),
                      ],
                    ),
                    const Spacer(),
                    IconButton(
                      icon: SvgPicture.asset("assets/svg/details.svg"),
                      onPressed: () {
                        Future.delayed(Duration.zero, () async {
                          // 注意：原代码中方法名`data`与变量名冲突，建议重命名为showDetails之类的
                          showDetails(context, data.name, data.leadId.toString());
                        });
                      },
                    ),
                  ],
                ),
              ),
              // 组内条目间的分割线，最后一条数据不显示
              if (currentGroup.indexOf(data) != currentGroup.length - 1)
                Container(
                  color: Colors.blueGrey[100],
                  height: 0.8,
                ),
            ],
          );
        }).toList(),
      ),
    );
  },
)

二、更适合的Widget推荐 #

根据不同布局需求，这些Widget可以更高效地实现分组展示：

• GridView.builder：如果分组需要网格布局（比如2列2行的4格布局），直接设置crossAxisCount: 2，就能自动按4条一组排列，无需手动拆分数据。
• Wrap：如果分组内的条目需要自适应换行（比如根据屏幕宽度调整每行数量），Wrap会自动处理换行，适合灵活的流式布局。
• CustomScrollView + SliverList：当数据量极大时，使用CustomScrollView结合SliverList可以优化滚动性能，每个分组作为一个独立的Sliver子项，提升大列表的流畅度。

内容的提问来源于stack exchange，提问作者sonalika