Flutter：如何用ListView.builder将API数据按4条分组展示及组件推荐

一、用ListView.builder实现分组的核心思路 #

要实现每4条数据放入一个Container，核心是将数据源按4条为一组拆分，让ListView.builder的每个item对应一个分组Container，而非单条数据：

1. 计算分组总数：用(_data?.length ?? 0 + 3) ~/ 4（向上取整，避免最后一组数据不足4条时被忽略）
2. 在itemBuilder中，根据当前组索引截取对应的数据子集
3. 每个分组Container内部，遍历子集生成单条数据的UI

二、修改后的完整代码 #

ListView.builder(
  shrinkWrap: true,
  // 计算分组数量：向上取整
  itemCount: _data == null ? 0 : (_data.length + 3) ~/ 4,
  itemBuilder: (context, groupIndex) {
    // 计算当前组的起始和结束索引，避免越界
    final start = groupIndex * 4;
    final end = start + 4 > _data.length ? _data.length : start + 4;
    final groupData = _data.sublist(start, end);

    // 每个分组的外层Container
    return Container(
      margin: EdgeInsets.symmetric(vertical: 8, horizontal: 10),
      padding: EdgeInsets.all(8),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey.shade200),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Column(
        children: groupData.map((data) {
          String name = data?.name.toString() ?? '';
          var names = StringUtils.convertToTitleCase(name);
          var leadid = data?.leadId.toString();

          // 复用原有的单条数据UI布局
          return Column(
            children: [
              Padding(
                padding: EdgeInsets.symmetric(vertical: 5),
                child: Row(
                  children: [
                    GestureDetector(
                      onTap: () {},
                      child: Container(
                        height: 30,
                        width: 33,
                        child: randomAvatar(
                          DateTime.now().toIso8601String(),
                          height: 60,
                          width: 62,
                        ),
                      ),
                    ),
                    SizedBox(width: 10),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          width: MediaQuery.of(context).size.width * 0.4,
                          child: Text(
                            names,
                            overflow: TextOverflow.ellipsis,
                            style: UtilsMethods.mediumTextStyle(
                              AppColor.darkGrey,
                              13,
                            ),
                          ),
                        ),
                        Text(
                          leadid.toString(),
                          style: UtilsMethods.mediumTextStyle(
                            AppColor.darkGrey,
                            10,
                          ),
                        ),
                      ],
                    ),
                    Spacer(),
                    IconButton(
                      icon: SvgPicture.asset("assets/svg/details.svg"),
                      onPressed: () {
                        Future.delayed(Duration.zero, () async {
                          // 注意原代码中data方法存在命名冲突，建议重命名为showDetailDialog
                          showDetailDialog(
                            context,
                            data?.name,
                            data?.leadId.toString(),
                          );
                        });
                      },
                    ),
                  ],
                ),
              ),
              // 组内数据间的分割线，最后一条数据不显示
              if (groupData.indexOf(data) != groupData.length - 1)
                Container(
                  color: Colors.blueGrey[100],
                  height: 0.8,
                )
            ],
          );
        }).toList(),
      ),
    );
  },
)

三、完成任务所需的技术点 #

• Dart集合操作：用sublist()截取分组数据，map()遍历生成子UI
• 布局嵌套技巧：通过Column嵌套实现组内多条数据的纵向排列
• 边界处理：计算分组时的向上取整、截取数据时的索引越界判断
• 样式区分：给分组Container添加边框、内边距等样式，区分不同组

四、适合该场景的其他Widget推荐 #

• GridView.count：如果希望分组以网格形式展示（比如每行2条，2行一组），可直接设置crossAxisCount:2，无需手动分组
• Wrap：适合数据条数不固定的流式分组，自动换行，但需额外逻辑控制每组数量
• CustomScrollView + SliverList：如果页面包含其他滚动组件（如SliverAppBar），用SliverList实现分组滚动可保持整体滚动连贯性

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