Flutter中如何合并三个列表并通过键取值以构建动态数据表格

1. 合并三个列表为可按键取值的结构化数据 #

两种实现方式可选，优先推荐类实现保证类型安全：

方式一：自定义数据实体类（类型安全） #

// 定义每行数据结构，可通过属性直接获取对应列表的值
class TableRowItem {
  final double list1Val;
  final double list2Val;
  final int list3Val;

  TableRowItem({
    required this.list1Val,
    required this.list2Val,
    required this.list3Val,
  });
}

// 原始列表定义
final List<double> list1 = [0.1, 0.2, 0.3];
final List<double> list2 = [0.5, 0.10, 6.0];
final List<int> list3 = [1, 2, 3];

// 合并生成结构化列表，自动取最短列表长度避免索引越界
final int rowCount = [list1.length, list2.length, list3.length].reduce((min, curr) => curr < min ? curr : min);
final List<TableRowItem> mergedData = List.generate(rowCount, (index) => TableRowItem(
  list1Val: list1[index],
  list2Val: list2[index],
  list3Val: list3[index],
));

方式二：Map结构（无需定义类，可通过字符串键取值） #

final List<Map<String, dynamic>> mergedData = List.generate(rowCount, (index) => {
  'list1': list1[index],
  'list2': list2[index],
  'list3': list3[index],
});
// 取值示例：mergedData[2]['list1'] 即可获取list1的第3个元素

2. 构建动态DataTable #

直接基于合并后的结构化数据生成表格行即可：

Widget build(BuildContext context) {
  return SingleChildScrollView(
    scrollDirection: Axis.horizontal, // 支持横向滚动适配超宽内容
    child: DataTable(
      columns: const [
        DataColumn(label: Text('列表1数值')),
        DataColumn(label: Text('列表2数值')),
        DataColumn(label: Text('列表3数值')),
      ],
      rows: mergedData.map((rowItem) {
        return DataRow(cells: [
          // 类实现的取值写法
          DataCell(Text(rowItem.list1Val.toString())),
          DataCell(Text(rowItem.list2Val.toString())),
          DataCell(Text(rowItem.list3Val.toString())),
          // 如果用Map实现，替换为下面写法
          // DataCell(Text(rowItem['list1'].toString())),
          // DataCell(Text(rowItem['list2'].toString())),
          // DataCell(Text(rowItem['list3'].toString())),
        ]);
      }).toList(),
    ),
  );
}

注意事项 #

• 如果业务要求三个列表长度不一致时补全缺失值，可将rowCount的取值逻辑改为取三个列表的最大长度，索引超出对应列表长度时填充默认值即可
• 如果需要列表更新后同步刷新表格，将mergedData放在State层管理，数据变更时调用setState更新即可

内容的提问来源于stack exchange，提问作者Muhammad Awais Younas