如何在Flutter的ListView中实现可动态添加子项的嵌套列表

问题说明 #

想要参考Strong应用的界面实现嵌套ListView，要求每个外层绿色卡片下方能添加更多红色子项。目前已完成外层绿色ListView，也设置了添加内层列表的按钮，但按钮功能尚未实现。

解决方案 #

核心问题是当前数据结构仅用字符串列表无法区分外层项和其对应的子项，需要调整数据结构来存储每个外层项的子项集合。以下是修改后的完整实现：

1. 定义数据模型 #

创建一个Exercise类，用来存储每个外层项的标题和对应的子项列表：

class Exercise {
  String name;
  List<String> sets;

  Exercise({required this.name, required this.sets});
}

2. 初始化列表 #

将原来的字符串列表替换为List<Exercise>类型的列表：

List<Exercise> exercises = [
  Exercise(name: 'hei', sets: []), // 初始示例数据
];

3. 修改界面代码 #

替换原来的Expanded和底部按钮部分代码：

Expanded(
  child: ListView.builder(
    itemCount: exercises.length,
    itemBuilder: (BuildContext ctxt, int index) {
      return Card(
        child: Padding(
          padding: EdgeInsets.all(10),
          child: ExpansionTile(
            initiallyExpanded: true,
            title: Text(
              exercises[index].name,
              style: const TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
            children: <Widget>[
              // 子项ListView：显示红色子项
              ListView.builder(
                shrinkWrap: true, // 必须设置，避免嵌套ListView高度计算问题
                physics: NeverScrollableScrollPhysics(), // 禁用子列表滚动，复用外层滚动
                itemCount: exercises[index].sets.length,
                itemBuilder: (context, setIndex) {
                  return Padding(
                    padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                    child: Text(
                      exercises[index].sets[setIndex],
                      style: TextStyle(color: Colors.red, fontSize: 18),
                    ),
                  );
                },
              ),
              ElevatedButton(
                onPressed: () {
                  // 给当前外层项添加子项
                  setState(() {
                    exercises[index].sets.add('新组 ${exercises[index].sets.length + 1}');
                  });
                },
                child: const Text('Add Set'),
              ),
              SizedBox(height: 5),
            ],
            leading: IconButton(
              icon: const Icon(
                Icons.close,
                color: Colors.red,
              ),
              onPressed: () {
                setState(() {
                  exercises.removeAt(index);
                });
              },
            ),
          ),
        ),
      );
    },
  ),
),
ElevatedButton(
  onPressed: () {
    setState(() {
      exercises.add(Exercise(name: '新训练 ${exercises.length + 1}', sets: []));
    });
  },
  child: const Text('Add Exercises'),
),

关键修改点 #

• 数据结构调整：用Exercise类关联外层标题和子项列表，解决嵌套数据的存储问题
• 子ListView配置：添加shrinkWrap: true和physics: NeverScrollableScrollPhysics()，避免嵌套ListView的滚动冲突和高度异常
• 按钮功能修正：Add Set按钮现在针对当前外层项添加子项，Add Exercises按钮添加新的训练项实例

内容的提问来源于stack exchange，提问作者Jesper Egsgaard Nielsen