在Flutter中数据追加后如何刷新Data Table？

要实现追加数据后自动刷新DataTable，核心是利用Flutter的状态管理机制触发UI重建，以下是具体步骤和优化后的代码示例：

1. 确保页面使用StatefulWidget #

只有StatefulWidget才能通过setState()更新状态，触发UI刷新。如果你的页面当前是StatelessWidget，需要改成StatefulWidget。

2. 正确处理数据追加操作 #

当你需要向results列表追加新数据时，必须将数据更新操作包裹在setState()中，这样Flutter才会感知到状态变化，重新执行build()方法。

3. 优化DataRow构建逻辑 #

你的原代码中_getDataRow函数接收了data参数但未使用，直接依赖全局的results列表，耦合度较高。建议直接使用传入的data参数构建DataCell，提升代码灵活性。

完整示例代码 #

import 'package:flutter/material.dart';

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

  @override
  State<DataTableDemo> createState() => _DataTableDemoState();
}

class _DataTableDemoState extends State<DataTableDemo> {
  List results = [];

  DataRow _getDataRow(index, data) {
    return DataRow(
      cells: <DataCell>[
        DataCell(Text(data['item_code'])),
        DataCell(Text(data['item_name'])),
        DataCell(Text(data['rate'])),
        DataCell(const Text("10")),
        DataCell(const Text("here")),
      ],
    );
  }

  // 模拟追加数据操作
  void _appendNewData() {
    // 替换为你的实际新数据源
    final newItems = [
      {'item_code': 'NEW001', 'item_name': '新增商品1', 'rate': '6.2'},
      {'item_code': 'NEW002', 'item_name': '新增商品2', 'rate': '7.8'},
    ];

    setState(() {
      results.addAll(newItems);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('DataTable刷新示例')),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: _appendNewData,
            child: const Text('追加数据'),
          ),
          Expanded(
            child: DataTable(
              columns: const [
                DataColumn(label: Text('商品编码')),
                DataColumn(label: Text('商品名称')),
                DataColumn(label: Text('费率')),
                DataColumn(label: Text('固定值')),
                DataColumn(label: Text('占位符')),
              ],
              rows: List.generate(results.length, (index) => _getDataRow(index, results[index])),
            ),
          ),
        ],
      ),
    );
  }
}

原理说明 #

setState()会通知Flutter框架当前State的状态已变更，触发build()方法重新执行。由于DataTable的rows属性依赖results列表，当results通过setState()更新后，DataTable会自动根据新列表生成对应行，完成UI刷新。

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