如何在Flutter中实现与后台管理端同步的表格功能？

一、数据结构与接口对接 #

• 先定义匹配后台数据的Model类，覆盖目标表格的所有字段（比如序号、项目名称、数值、状态等）：

  class TableItem {
    final int id;
    final String name;
    final double value;
    final String status;
  
    TableItem({required this.id, required this.name, required this.value, required this.status});
  
    // 从后台JSON转模型
    factory TableItem.fromJson(Map<String, dynamic> json) {
      return TableItem(
        id: json['id'],
        name: json['name'],
        value: json['value'].toDouble(),
        status: json['status'],
      );
    }
  }
  

• 封装网络请求方法获取后台数据，以dio为例：

  Future<List<TableItem>> fetchTableData() async {
    final response = await Dio().get('你的后台数据接口地址');
    if (response.statusCode == 200) {
      List<dynamic> dataList = response.data;
      return dataList.map((item) => TableItem.fromJson(item)).toList();
    } else {
      throw Exception('加载表格数据失败');
    }
  }
  

二、表格UI完善（基于现有进度优化） #

• 用FutureBuilder异步加载并渲染数据，搭配DataTable实现基础表格：

  FutureBuilder<List<TableItem>>(
    future: fetchTableData(),
    builder: (context, snapshot) {
      if (snapshot.hasData) {
        final tableData = snapshot.data!;
        if (tableData.isEmpty) {
          return const Center(child: Text('暂无数据'));
        }
        return SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: DataTable(
            columns: const [
              DataColumn(label: Text('序号')),
              DataColumn(label: Text('项目名称')),
              DataColumn(label: Text('数值')),
              DataColumn(label: Text('状态')),
            ],
            rows: tableData.map((item) {
              return DataRow(cells: [
                DataCell(Text(item.id.toString())),
                DataCell(Text(item.name)),
                DataCell(Text(item.value.toStringAsFixed(2))),
                DataCell(Container(
                  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                  decoration: BoxDecoration(
                    color: item.status == '正常' ? Colors.green.shade100 : Colors.red.shade100,
                    borderRadius: BorderRadius.circular(4),
                  ),
                  child: Text(item.status, style: TextStyle(color: item.status == '正常' ? Colors.green : Colors.red)),
                )),
              ]);
            }).toList(),
          ),
        );
      } else if (snapshot.hasError) {
        return Center(
          child: ElevatedButton(
            onPressed: () => setState(() {}),
            child: const Text('重试加载'),
          ),
        );
      }
      return const Center(child: CircularProgressIndicator());
    },
  )
  

• 如果需要纵向滚动，可在外层再嵌套一层SingleChildScrollView（设置Axis.vertical）。

三、实现后台数据实时同步 #

• 定时拉取方案：适合对实时性要求不高的场景，通过定时器定期请求数据并刷新UI：

  Timer? _refreshTimer;
  late Future<List<TableItem>> _tableDataFuture;
  
  @override
  void initState() {
    super.initState();
    _tableDataFuture = fetchTableData();
    // 每10秒刷新一次
    _refreshTimer = Timer.periodic(const Duration(seconds: 10), (timer) {
      setState(() {
        _tableDataFuture = fetchTableData();
      });
    });
  }
  
  @override
  void dispose() {
    _refreshTimer?.cancel();
    super.dispose();
  }
  

• WebSocket推送方案：如果后台支持WebSocket，建立长连接监听数据更新，收到新数据后直接更新列表状态，比定时拉取更高效。

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