Flutter取消复选框时无法正确移除列表元素问题求助

• 核心错误：widgets列表的索引和data数组的索引没有绑定关系，直接用data[index]的索引去删除widgets元素，必然导致索引越界或删除错误元素。比如先选中第三个复选框（data的index=2），此时widgets只有1个元素，调用removeAt(2)就会触发"Value not in range"错误；如果选中顺序是checkbox2→checkbox1，取消checkbox1时用index=0去删除，会删掉checkbox2的标题，逻辑完全混乱。
• 次要错误：赋值语句if (data[index]['value'] = value!)写法不规范，应该先赋值再判断，避免逻辑混淆。

方案一：基于数据源动态生成标题（推荐） #

直接根据data数组的选中状态动态构建标题列表，不需要手动维护widgets列表，从根源避免索引问题：

class _MyHomePageState extends State<MyHomePage> {
  List<Map<String, dynamic>> data = [
    {'title': 'checkbox1', 'value': false},
    {'title': 'checkbox2', 'value': false},
    {'title': 'checkbox3', 'value': false}
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          // 直接根据选中状态生成标题列表
          Column(
            children: data
                .where((item) => item['value'] as bool)
                .map((item) => Text(item['title'] as String))
                .toList(),
          ),
          ListView.builder(
            scrollDirection: Axis.vertical,
            shrinkWrap: true,
            itemCount: data.length,
            itemBuilder: (context, index) {
              return CheckboxListTile(
                title: Text(data[index]['title'] as String),
                value: data[index]['value'] as bool,
                onChanged: (value) {
                  setState(() {
                    // 先赋值，再触发状态更新
                    data[index]['value'] = value!;
                  });
                },
              );
            },
          ),
        ],
      ),
    );
  }
}

方案二：维护widgets列表但正确删除元素 #

如果一定要保留widgets列表，取消复选框时通过标题内容匹配删除，而不是用索引：

class _MyHomePageState extends State<MyHomePage> {
  List<Widget> widgets = [];
  List<Map<String, dynamic>> data = [
    {'title': 'checkbox1', 'value': false},
    {'title': 'checkbox2', 'value': false},
    {'title': 'checkbox3', 'value': false}
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          Column(children: widgets),
          ListView.builder(
            scrollDirection: Axis.vertical,
            shrinkWrap: true,
            itemCount: data.length,
            itemBuilder: (context, index) {
              return CheckboxListTile(
                title: Text(data[index]['title'] as String),
                value: data[index]['value'] as bool,
                onChanged: (value) {
                  setState(() {
                    final isChecked = value!;
                    data[index]['value'] = isChecked;
                    final title = data[index]['title'] as String;
                    
                    if (isChecked) {
                      widgets.add(Text(title));
                    } else {
                      // 通过标题匹配删除对应Text组件
                      widgets.removeWhere((widget) => 
                        widget is Text && widget.data == title
                      );
                    }
                  });
                },
              );
            },
          ),
        ],
      ),
    );
  }
}

• 方案一遵循Flutter状态管理原则：UI是数据源的投影，所有UI变化都通过修改数据源实现，代码更简洁、不易出错。
• 方案二中使用removeWhere可以精准匹配到对应标题的Text组件，不管widgets列表的顺序如何，都能正确删除。

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