如何实现按两个字段分组的可滚动列表展示？

需求说明 #

需要将以下动态数据展示为表格样式，其中Lots列包含多行内容，且整个列表支持滚动：

原始数据：

[{
  "ID": 0,
  "Line": 100,
  "Part": "00-87000088",
  "Lots": "00865756,00866790,00868501,00871385,00871905,00872712,00875997,00878042"
}, {
  "ID": 1,
  "Line": 990000,
  "Part": "00-87000001",
  "Lots": "00746727,00748270,00750627,00750632,00753983,00754156,00757423,00758997,00762736,00792476"
}]

期望展示样式：

Line      Part           Lots
100       00-87000088    00865756
                         00866790
                         00868501
                         00871385
                         00871905
                         00872712
                         00875997
                         00878042

990000    00-87000001    00746727          
                         00748270
                         00750627
                         00750632
                         00753983
                         00754156
                         00757423
                         00758997
                         00762736
                         00792476

问题分析 #

你之前的代码仅将Line、Part和完整的Lots字符串分别用Text组件堆叠，未拆分Lots为单独条目，也未处理列对齐和滚动逻辑，因此无法达到预期效果。

解决方案 #

1. 数据预处理 #

首先将每个条目里的Lots字符串拆分为字符串列表，方便后续遍历展示：

List<Map<dynamic, dynamic>> lotsPicked = await globals.issuePartsGetLots(wo: wo);

// 拆分每个item的Lots为字符串列表
for (var item in lotsPicked) {
  String lotsStr = item['Lots'].toString();
  item['LotsList'] = lotsStr.split(',');
}

2. 构建UI布局 #

使用外层ListView实现整体滚动，每个数据组内部用Table组件保证列对齐，Lots的多行内容通过生成多行TableRow来实现：

ListView.builder(
  padding: const EdgeInsets.all(8.0),
  itemCount: lotsPicked.length,
  itemBuilder: (BuildContext context, int index) {
    final item = lotsPicked[index];
    final List<String> lotsList = item['LotsList'] as List<String>;

    // 构建当前组的所有表格行
    final List<TableRow> tableRows = [];

    // 第一行：显示Line、Part和第一个Lot
    tableRows.add(TableRow(
      children: [
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 6.0, horizontal: 4.0),
          child: Text(item['Line'].toString()),
        ),
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 6.0, horizontal: 4.0),
          child: Text(item['Part'].toString()),
        ),
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 6.0, horizontal: 4.0),
          child: Text(lotsList[0]),
        ),
      ],
    ));

    // 剩余Lot行：仅显示Lot内容，前两列留空
    for (final lot in lotsList.skip(1)) {
      tableRows.add(TableRow(
        children: [
          const SizedBox.shrink(),
          const SizedBox.shrink(),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 6.0, horizontal: 4.0),
            child: Text(lot),
          ),
        ],
      ));
    }

    return Column(
      children: [
        Table(
          // 配置列宽保证对齐
          columnWidths: const {
            0: FixedColumnWidth(80),
            1: FixedColumnWidth(150),
            2: FlexColumnWidth(),
          },
          // 可选：添加边框增强表格视觉效果
          border: TableBorder.all(color: Colors.grey.shade200),
          children: tableRows,
        ),
        // 组与组之间的间隔
        const SizedBox(height: 16),
      ],
    );
  },
)

关键说明 #

• 列对齐：通过FixedColumnWidth固定Line和Part列的宽度，Lots列使用FlexColumnWidth自适应剩余空间，确保所有行对齐一致。
• 滚动支持：外层ListView负责整体滚动，无需嵌套独立滚动组件，避免滚动冲突。
• 动态适配：通过遍历拆分后的LotsList生成对应行，无论Lots数量多少都能自适应展示。

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