在表中使用TextFormField (DataTable)

在表中使用TextFormField (DataTable)是一种在Flutter中创建交互式表单的方法。TextFormField是一个可编辑的文本字段，它允许用户输入文本并将其提交给应用程序。

在DataTable中使用TextFormField可以实现在表格中编辑和保存数据的功能。DataTable是Flutter中用于显示表格数据的小部件，它可以显示多行和多列的数据，并支持排序和筛选。

使用TextFormField (DataTable)的步骤如下：

导入所需的包：

import 'package:flutter/material.dart';

创建一个包含表格数据的数据源：

List<Map<String, dynamic>> tableData = [
  {'name': 'John', 'age': 25},
  {'name': 'Jane', 'age': 30},
  {'name': 'Bob', 'age': 35},
];

创建一个状态管理器来跟踪表格数据的更改：

class TableDataModel {
  String name;
  int age;

  TableDataModel({this.name, this.age});
}

创建一个包含TextFormField的小部件，并将其放置在DataTable中的单元格中：

class EditableCell extends StatefulWidget {
  final TableDataModel data;
  final String fieldName;

  EditableCell({this.data, this.fieldName});

  @override
  _EditableCellState createState() => _EditableCellState();
}

class _EditableCellState extends State<EditableCell> {
  TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController(text: widget.data.name);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: _controller,
      onChanged: (value) {
        setState(() {
          widget.data.name = value;
        });
      },
      decoration: InputDecoration(
        border: InputBorder.none,
      ),
    );
  }
}

创建一个包含DataTable的小部件，并在其中使用EditableCell来显示可编辑的单元格：

class MyTable extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DataTable(
      columns: [
        DataColumn(label: Text('Name')),
        DataColumn(label: Text('Age')),
      ],
      rows: tableData.map((data) {
        TableDataModel model = TableDataModel(name: data['name'], age: data['age']);
        return DataRow(
          cells: [
            DataCell(EditableCell(data: model, fieldName: 'name')),
            DataCell(Text(data['age'].toString())),
          ],
        );
      }).toList(),
    );
  }
}

在主应用程序中使用MyTable小部件来显示表格：

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: MyTable(),
      ),
    );
  }
}

这样，就可以在表格中使用TextFormField来实现编辑功能。用户可以在TextFormField中输入文本，并通过onChanged回调来更新表格数据。