如何在每个按钮单击上添加新表格行

Question

我正在使用 Flutter。我有一个字符串列表。 我需要在单击按钮后添加新行。

我需要跟踪单击按钮以添加正确行数的次数。

以下代码不起作用 - 我没有看到添加的新表行。

另一个问题是单击 addRow 按钮后出现错误：

RangeError（长度）：无效值：唯一有效值为 0: 1

代码：

List<String?> = myData[''];

static List<DataRow?> myTableRowsList=[DataRow(cells: <DataCell>[DataCell(Text('-'))])];

int i = 0;

addRow(){
    setState(() {
      i = i + 1;
      myTableRowsList.add(DataRow(cells: <DataCell>[DataCell(Text(myData[i]!)))
      ]));
  });
  }

Widget mybutton = TextButton(onPressed: addRow);

Widget mytable = Container(child: SizedBox(height: 1000, child:DataTable(columns: [
          DataColumn(label: Text('myTestData'))],
                rows: List<DataRow>.generate(myData.length,(i) => DataRow(cells: [
          DataCell(DropdownButton<String>(value: myData[i],onChanged: (String? newValue) {
                 setState(() {
                   myData[i] = newValue!;
                 });
               },
                   items: myData.map((xyz) {
                     return DropdownMenuItem<String>(value: xyz,child: Text(xyz!));
                   }).toList()))
                ]))
        )));

Answer 1

您似乎正在寻找一个在单击按钮时添加新行的表格。如果这就是您的需要，我创建了一个简单的 Flutter 应用程序来实现此目的。这是代码：

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // Sample data for new rows to be added
  final List<String> rowsData = ['row 2', 'row 3', 'row 4'];

  // Initial rows
  final List<String> rows = ['row 1'];

  int rowIndexAdded = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Dynamic Table Example'),
      ),
      body: Column(
        children: [
          DataTable(
            columns: const [
              DataColumn(
                label: Text('Column 1'),
              )
            ],
            rows: rows
                .map(
                  (row) => DataRow(cells: [DataCell(Text(row))]),
                )
                .toList(),
          ),
          const SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              setState(() {
                // Add a new row if available
                if (rowIndexAdded < rowsData.length) {
                  rows.add(rowsData[rowIndexAdded]);
                  rowIndexAdded++;
                }
              });
            },
            child: const Text('Add New Row'),
          ),
        ],
      ),
    );
  }
}

说明：

• 该应用程序显示一个具有单列的表格（DataTable）， 最初是一行（第 1 行）。
• 按下按钮时，将从 rowsData 添加新行 列表。
• setState() 方法用于使用新行更新 UI。

考虑： 该示例保持简单以演示动态行添加。如果您需要更多功能或自定义，请随时在评论中询问，我很乐意提供其他代码。 此代码将帮助您通过单击按钮实现向表中动态添加行。