Flutter ToggleButtons点击后状态不更新问题求助

问题原因 #

你在ToggleButtons的onPressed回调里直接修改了ValueNotifier<List<bool>>内部列表的元素值，但List是可变对象，这种内部修改不会触发ValueNotifier的状态更新通知，导致UI无法感知到选中状态的变化，所以点击按钮后没有任何视觉反馈。

修复代码 #

修改onPressed回调逻辑，创建列表的新副本并修改选中状态，再赋值给isSelect.value，触发状态更新：

Widget _step2Body(BuildContext context, ValueNotifier<List<bool>> isSelect) {
  return ToggleButtons(
    onPressed: (newIndex) {
      // 创建原列表的副本，避免直接修改原列表
      final updatedList = List<bool>.from(isSelect.value);
      for (int i = 0; i < updatedList.length; i++) {
        updatedList[i] = i == newIndex;
      }
      // 赋值新列表触发状态更新
      isSelect.value = updatedList;
    },
    // 其他属性保持不变
    borderRadius: const BorderRadius.all(Radius.circular(8)),
    selectedBorderColor: Colors.red[700],
    selectedColor: Colors.white,
    fillColor: Colors.red[200],
    color: Colors.red[400],
    constraints: const BoxConstraints(
      minHeight: 40.0,
      minWidth: 80.0,
    ),
    isSelected: isSelect.value,
    textStyle: const TextStyle(fontWeight: FontWeight.bold),
    renderBorder: true,
    borderColor: Colors.black,
    borderWidth: 1.5,
    children: const [
      Padding(
        padding: EdgeInsets.symmetric(horizontal: 12),
        child: Text('MALE', style: TextStyle(fontSize: 18)),
      ),
      Padding(
        padding: EdgeInsets.symmetric(horizontal: 12),
        child: Text('FEMALE', style: TextStyle(fontSize: 18)),
      ),
      Padding(
        padding: EdgeInsets.symmetric(horizontal: 12),
        child: Text('OTHER', style: TextStyle(fontSize: 18)),
      ),
    ],
  );
}

原理说明 #

Flutter的ValueNotifier只会在value被重新赋值（即引用发生变化）时才会通知监听者更新UI。直接修改可变对象（比如List、Map）的内部元素，对象的引用没有改变，所以不会触发更新。通过创建新的列表副本并赋值，改变了value的引用，就能正确触发UI刷新，让ToggleButtons显示正确的选中状态。

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