Flutter点击按钮添加DataTable行失败及RangeError问题求助

问题根源 #

你代码里的几个关键错误导致了报错和无法添加行：

1. myData初始化完全错误：List<String?> = myData['']; 语法不对，而且初始是空列表，点击按钮后i变成1，直接访问myData[1]必然越界（此时列表长度为0，只能访问索引0）。
2. 静态变量+逻辑脱节：myTableRowsList设为static，setState无法触发它的UI更新，更关键的是你DataTable的rows根本没用到这个列表，等于白加。
3. 行生成逻辑矛盾：表格行是基于myData.length生成的，但你添加行时没给myData加元素，反而去访问不存在的索引。

修正后的完整代码 #

把你的代码改成下面这样，就能正常添加行了：

import 'package:flutter/material.dart';

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

  @override
  State<MyTablePage> createState() => _MyTablePageState();
}

class _MyTablePageState extends State<MyTablePage> {
  // 初始化空的字符串列表，存储每行的选中值
  List<String?> myData = [];
  // 固定的下拉选项列表，避免逻辑循环
  final List<String> dropdownOptions = ['选项1', '选项2', '选项3'];

  // 添加行的方法
  void addRow() {
    setState(() {
      // 先给myData添加默认值，表格行长度会自动同步
      myData.add(dropdownOptions.first);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('测试表格')),
      body: Column(
        children: [
          // 添加按钮
          TextButton(onPressed: addRow, child: const Text('添加行')),
          // 表格区域
          Expanded(
            child: DataTable(
              columns: const [DataColumn(label: Text('myTestData'))],
              rows: List.generate(
                myData.length,
                (index) => DataRow(
                  cells: [
                    DataCell(
                      DropdownButton<String>(
                        value: myData[index],
                        onChanged: (String? newValue) {
                          setState(() {
                            myData[index] = newValue!;
                          });
                        },
                        items: dropdownOptions.map((option) {
                          return DropdownMenuItem<String>(
                            value: option,
                            child: Text(option),
                          );
                        }).toList(),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

关键修改说明 #

• 修正myData的初始化逻辑，添加行时先给列表插入默认值，让表格行的生成有数据支撑。
• 移除了没用的myTableRowsList，直接通过myData.length动态生成表格行，数据变化时UI自动更新。
• 改用固定的下拉选项列表，避免原代码中用myData.map导致的逻辑循环问题。
• 调整Widget结构，把按钮和表格放到标准的Scaffold布局中，符合Flutter开发规范。

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