Flutter：点击相邻Widget切换Checkbox状态失败，代码求助

核心问题 #

1. static变量导致状态共享：MyCheckBoxCountry里的static bool isChecked会让所有Checkbox实例共用同一个状态，点击任意一个，所有Checkbox都会同步变化。
2. 函数未正确调用：InkWell的onTap里只写了_changeFlagCheckBox，没有加括号调用，而且该函数逻辑不符合“切换当前项状态”的需求。
3. 未维护独立项状态：没有为每个城市条目单独维护选中状态，无法实现单个条目独立切换。
4. 拼写错误：原代码里的SizeBox是错误写法，应为SizedBox。

修复后的完整代码 #

1. 父组件（包含ListView的部分）

// 父组件中添加状态列表，维护每个城市的选中状态
List<bool> _checkedStates = [];

// 初始化时同步city列表长度
@override
void initState() {
  super.initState();
  _checkedStates = List.filled(city.length, false);
}

// 切换对应索引的选中状态
void _toggleCheckState(int index) {
  setState(() {
    _checkedStates[index] = !_checkedStates[index];
  });
}

// 修改ListView.builder部分
child: ListView.builder(
  itemCount: city.length,
  shrinkWrap: true,
  itemBuilder: (BuildContext context, int index) {
    return InkWell(
      onTap: () {
        print(city[index]);
        _toggleCheckState(index); // 调用切换函数
      },
      child: Container(
        margin: const EdgeInsets.only(top: 15),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              children: [
                SizedBox(width: 10),
                Text(
                  city[index],
                  style: TextStyle(
                    color: ConfigColor.white,
                    fontWeight: FontWeight.w500,
                    fontSize: 15,
                  ),
                )
              ],
            ),
            // 传递当前项的选中状态和回调
            MyCheckBoxCountry(
              isChecked: _checkedStates[index],
              onChanged: (value) {
                _toggleCheckState(index);
              },
            )
          ],
        ),
      ),
    );
  },
),

2. 修改MyCheckBoxCountry组件（改为受控组件）

class MyCheckBoxCountry extends StatelessWidget {
  final bool isChecked;
  final ValueChanged<bool?> onChanged;

  const MyCheckBoxCountry({
    Key? key,
    required this.isChecked,
    required this.onChanged,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: Theme.of(context).copyWith(
        unselectedWidgetColor: ConfigColor.grey,
      ),
      child: Checkbox(
        activeColor: ConfigColor.green,
        checkColor: ConfigColor.background,
        value: isChecked,
        shape: CircleBorder(),
        onChanged: onChanged,
      ),
    );
  }
}

关键修改说明 #

• 移除MyCheckBoxCountry中的static变量，将其改为受控组件，由父组件传递选中状态和切换回调，避免状态共享。
• 父组件通过_checkedStates列表单独维护每个城市条目的选中状态，实现独立控制。
• 修正InkWell的点击逻辑，正确调用切换函数并传递索引，实现点击文本区域切换对应Checkbox状态。

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