Flutter表格列可编辑实现及点击保存按钮存储数据方案咨询

要实现表格列可编辑并保存数据，核心是用状态管理动态数据，把静态Text替换为可交互的TextField，再通过按钮触发保存逻辑。以下是完整实现方案：

关键步骤 #

• 将静态数据转为状态变量：把表格里的固定值放到State的可修改变量中，方便编辑后更新。
• 替换Text为TextField：让表格单元格变成可输入的文本框，绑定状态变量实现实时更新。
• 添加保存逻辑：在Save按钮的点击事件中，读取最新的表格数据并执行保存操作（比如打印、存储到本地或接口）。

修改后的完整代码 #

class _TableExample extends State<ggwp> {
  // 用状态变量存储表格数据，方便编辑更新
  List<Map<String, dynamic>> tableData = [
    {'title': 'Selection No', 'values': ['001', '002']},
    {'title': 'Price', 'values': ['5.5', '6.9']},
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Table Example'),
        ),
        body: Center(
          child: Column(
            children: <Widget>[
              Container(
                margin: const EdgeInsets.only(top: 10),
                child: Table(
                  defaultColumnWidth: const FixedColumnWidth(126.0),
                  border: TableBorder.all(
                    color: Colors.black,
                    style: BorderStyle.solid,
                    width: 2,
                  ),
                  children: tableData.map((rowData) {
                    return TableRow(
                      children: [
                        // 标题列
                        Container(
                          padding: const EdgeInsets.only(top: 15),
                          height: 50,
                          color: Colors.cyan,
                          child: Text(
                            rowData['title'],
                            style: const TextStyle(fontSize: 20),
                          ),
                        ),
                        // 第一列可编辑单元格
                        Container(
                          padding: const EdgeInsets.symmetric(horizontal: 8),
                          color: Colors.white,
                          child: TextField(
                            style: const TextStyle(fontSize: 20),
                            textAlign: TextAlign.center,
                            controller: TextEditingController(text: rowData['values'][0]),
                            onChanged: (value) {
                              rowData['values'][0] = value;
                            },
                          ),
                        ),
                        // 第二列可编辑单元格
                        Container(
                          padding: const EdgeInsets.symmetric(horizontal: 8),
                          color: Colors.white,
                          child: TextField(
                            style: const TextStyle(fontSize: 20),
                            textAlign: TextAlign.center,
                            controller: TextEditingController(text: rowData['values'][1]),
                            onChanged: (value) {
                              rowData['values'][1] = value;
                            },
                          ),
                        ),
                      ],
                    );
                  }).toList(),
                ),
              ),
              Container(
                margin: const EdgeInsets.only(top: 20),
                child: ElevatedButton(
                  onPressed: () {
                    // 保存逻辑：这里以打印数据为例，可替换为存储到本地/接口
                    print('保存的数据：');
                    for (var row in tableData) {
                      print('${row['title']}: ${row['values'].join(', ')}');
                    }
                    // 示例：弹出提示保存成功
                    ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(content: Text('数据已保存')),
                    );
                  },
                  child: const Text('Save'),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

代码说明 #

• 状态数据管理：tableData是List类型，每个元素存一行的标题和对应列的值，编辑时直接更新这个变量。
• TextField绑定：每个可编辑单元格用TextField，通过TextEditingController初始化显示值，onChanged回调实时更新tableData里的数据。
• 保存逻辑：点击Save按钮时，读取tableData的最新值，这里用打印演示，实际项目中可以替换为写入SharedPreferences、SQLite或调用API上传数据。

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