Flutter - DataTables - 我们可以有一个编辑列来编辑行吗？

Question

我知道我们可以通过在 DataCell 中添加一个 TextField 来编辑 DataTable 中的单个单元格：

    dataRows.add(
      DataRow(cells: [
        DataCell(
          TextFormField(
            style: AppTextStyle.textStyleRegular,
            initialValue: _value,
            keyboardType: TextInputType.number,
            onFieldSubmitted: (val) {
              //print('onSubmited $val');
            },
          ),
          showEditIcon: true,
        ),
        ...

我需要的是每行都有一个带有编辑图标的列。单击编辑图标应该使行中的单元格可编辑。有可能这样做吗？在这种情况下，我怎么知道哪个单元格被编辑了？

应该是这样的：

Answer 1

您可以试试下面的sample code 以获得预期的结果

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {

  List<bool> _isEditable = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
        itemCount: 5,
          itemBuilder: (context, index) {
          _isEditable.add(false);
          return Row(
            children: [
              Expanded(child: Text("#$index")),
              Expanded(child: TextFormField(
                enabled: _isEditable[index],
                controller: TextEditingController(text: "User $index"),
              )),
              Expanded(child: TextFormField(
                enabled: _isEditable[index],
                controller: TextEditingController(text: "${index*5} KG"),
              )),
              IconButton(onPressed: (){
                setState(() {
                  _isEditable[index] = !_isEditable[index];
                });
              }, icon: Icon(Icons.edit)),
            ],
          );
          }),
    );
  }
}

编辑前

点击编辑后