Flutter动态Checkbox状态独立切换：点击单个仅更新自身状态

开发者阿泽

2026-7-15

解决动态Checkbox点击同步更新的问题

你现在的问题根源是所有Checkbox都绑定了同一个isChecked变量，不管点哪个选项，都会触发这个全局变量更新，导致所有Checkbox状态同步变化。要实现点击单个Checkbox仅更新自身状态，需要给每个选项单独维护状态，用列表来存储每个Checkbox的选中状态：

步骤1：替换单个状态变量为列表

把原来的单个bool? isChecked = false;改成列表，用来对应每个餐品项的选中状态：

// 在State类的成员变量中定义
List<bool?> isCheckedList = [];

步骤2：初始化状态列表并绑定到对应Checkbox

在获取到数据后，根据餐品数量初始化状态列表，每个Checkbox绑定列表中对应索引的状态：

return ref.watch(getMealByIdProvider(widget.ID)).when(
  data: (e) {
    // 每次数据刷新时同步列表长度，避免数据变化后长度不匹配
    if (isCheckedList.length != e.mealName.length) {
      isCheckedList = List.generate(e.mealName.length, (index) => false);
    }
    return Scaffold(
      body: ListView(
        children: [
          for (int i = 0; i < e.mealName.length; i++)
            CheckboxListTile(
              title: Text(e.mealName[i]),
              // 绑定当前索引对应的状态
              value: isCheckedList[i],
              onChanged: (value) {
                setState(() {
                  // 仅更新当前点击项的状态
                  isCheckedList[i] = value;
                });
              },
            )
        ],
      ),
    );
  },
  loading: () => const CircularProgressIndicator(),
  error: (err, stack) => Text('加载错误: $err'),
);