Flutter中如何将Map数据展示在DataTable并实现动态行扩展

已成功将字符串类型的formattedDates列表与double类型的unitsList列表合并为Map，但不知道如何在DataTable的两个DataCell中提取Map的键值对生成对应行，同时需要实现Map新增数据时表格自动添加对应行。

现有数据处理代码：

List<String> formattedDates = datesList.map((a) => DateFormat('Md').format(a)).toList();
List<double> unitsList = widget.logRecord.updatesUnits.toList();
final testMap = Map.fromIterables(formattedDates, unitsList);
print('testMap $testMap');

// 输出示例
// flutter: testMap {4/10: 200.0, 4/13: 400.0, 4/14: 600.0, ...}

当前尝试的DataTable代码（无法正确提取数据）：

DataTable(
 columns: [
  DataColumn(label: Text('Date Updated')),
  DataColumn(label: Text('Unit added'))
  ],
 rows:  [DataRow(cells: [
  DataCell(Text('${testMap[formattedDates]}')), // 返回null
  DataCell(Text('${testMap[unitsList]}')) // 返回null
  ])
 ]
)

1. 从Map生成DataTable行 #

遍历Map的entries（每个entry对应一组键值对），为每个entry生成对应的DataRow即可：

DataTable(
  columns: const [
    DataColumn(label: Text('Date Updated')),
    DataColumn(label: Text('Unit added'))
  ],
  rows: testMap.entries.map((entry) {
    return DataRow(cells: [
      DataCell(Text(entry.key)), // 提取Map的键（日期）
      DataCell(Text(entry.value.toString())), // 提取Map的值（数值，转字符串展示）
    ]);
  }).toList(),
)

解释：testMap.entries会返回Map中所有键值对的迭代器，通过map方法将每个entry转换为DataRow，每个DataRow包含两个DataCell分别对应日期和数值。

2. 实现数据新增时自动更新表格 #

要让表格随Map数据新增自动扩展，需将数据存入StatefulWidget的状态中，数据变化时调用setState()触发UI重建：

步骤1：将数据托管到State #

class YourTableWidget extends StatefulWidget {
  const YourTableWidget({super.key});

  @override
  State<YourTableWidget> createState() => _YourTableWidgetState();
}

class _YourTableWidgetState extends State<YourTableWidget> {
  late Map<String, double> testMap;

  @override
  void initState() {
    super.initState();
    // 初始化Map数据
    List<String> formattedDates = datesList.map((a) => DateFormat('Md').format(a)).toList();
    List<double> unitsList = widget.logRecord.updatesUnits.toList();
    testMap = Map.fromIterables(formattedDates, unitsList);
  }

  // 新增数据的方法
  void addNewData(String date, double unit) {
    setState(() {
      testMap[date] = unit; // 更新Map数据
    });
  }

  @override
  Widget build(BuildContext context) {
    return DataTable(
      columns: const [
        DataColumn(label: Text('Date Updated')),
        DataColumn(label: Text('Unit added'))
      ],
      rows: testMap.entries.map((entry) {
        return DataRow(cells: [
          DataCell(Text(entry.key)),
          DataCell(Text(entry.value.toString())),
        ]);
      }).toList(),
    );
  }
}

步骤2：触发数据更新 #

当需要添加新的键值对时，调用addNewData方法即可，示例：

// 添加新数据
addNewData('5/10', 12000.0);

调用setState()后，Flutter会重新执行build方法，DataTable会根据更新后的Map自动生成新的行。

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