Flutter动态生成行的表格添加列方法咨询

要给这个自动生成行的DataTable添加新列，只需要同步修改列定义和每行的单元格内容即可，具体操作如下：

步骤1：新增列定义 #

在DataTable的columns列表里添加新的DataColumn，比如我们新增一个"状态"列：

columns: const <DataColumn>[
  DataColumn(label: Text('Number')),
  DataColumn(label: Text('状态')), // 新增的列
],

步骤2：对应新增每行的单元格 #

在List<DataRow>.generate的cells数组里，添加与新列对应的DataCell，内容可以根据行数据动态生成，这里我们显示该行的选中状态：

cells: <DataCell>[
  DataCell(Text('Row $index')),
  DataCell(Text(selected[index] ? '已选中' : '未选中')), // 对应新列的单元格内容
],

修改后的完整代码 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}

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

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  static const int numItems = 10;
  List<bool> selected = List<bool>.generate(numItems, (int index) => false);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      child: DataTable(
        // 新增了"状态"列
        columns: const <DataColumn>[
          DataColumn(label: Text('Number')),
          DataColumn(label: Text('状态')),
        ],
        rows: List<DataRow>.generate(
          numItems,
          (int index) => DataRow(
            color: MaterialStateProperty.resolveWith<Color?>(
                (Set<MaterialState> states) {
              if (states.contains(MaterialState.selected)) {
                return Theme.of(context).colorScheme.primary.withOpacity(0.08);
              }
              if (index.isEven) {
                return Colors.grey.withOpacity(0.3);
              }
              return null;
            }),
            // 对应新增列添加了单元格内容
            cells: <DataCell>[
              DataCell(Text('Row $index')),
              DataCell(Text(selected[index] ? '已选中' : '未选中')),
            ],
            selected: selected[index],
            onSelectChanged: (bool? value) {
              setState(() {
                selected[index] = value!;
              });
            },
          ),
        ),
      ),
    );
  }
}

核心逻辑就是：列的数量必须和每行单元格的数量保持一致，只要同步修改这两个地方，就能顺利添加新列。如果要加更多列，重复这两步即可——先加列定义，再加对应单元格。

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