Flutter中ToggleButton点击后无视觉刷新但onPressed功能正常问题

核心问题分析 #

你遇到的情况是ToggleButton的onPressed逻辑正常执行（相关数值已变更），但isSelected对应的视觉状态没更新，本质是Widget没有接收到状态变更的通知，没有触发重建。结合你的页面唤起方式（从StreamBuilder内组件长按push），可以从以下几个方向排查：

1. 确保状态更新在setState()块内执行 #

如果你的isSelected变量是State类的成员，但更新时没包裹在setState()里，Flutter就不会触发Widget重建。

错误示例：

// 直接修改状态，没触发重建
void _onTogglePressed(int index) {
  _isSelected[index] = !_isSelected[index];
  prefixTag = _isSelected[index] ? "new_tag" : "old_tag";
}

正确写法：

class _PrefixEditorState extends State<PrefixEditor> {
  List<bool> _isSelected = [false, true]; // 本地维护状态
  String prefixTag = "old_tag";

  void _onTogglePressed(int index) {
    setState(() { // 必须包裹在setState内
      _isSelected[index] = !_isSelected[index];
      prefixTag = _isSelected[index] ? "new_tag" : "old_tag";
    });
  }

  @override
  Widget build(BuildContext context) {
    return ToggleButtons(
      isSelected: _isSelected,
      onPressed: _onTogglePressed,
      selectedColor: Colors.blue,
      color: Colors.grey,
      // 其他样式属性
    );
  }
}

2. 避免直接修改列表元素，需更新列表引用 #

因为List是引用类型，如果只是修改列表内的元素，而列表本身的引用没变化，Flutter的状态对比机制可能认为状态没更新，从而不重建Widget。

正确的列表更新方式：

setState(() {
  // 创建新的列表实例，替换原引用
  _isSelected = List.from(_isSelected)..[index] = !_isSelected[index];
});

3. 排查页面实例是否被意外复用 #

由于你的页面是从StreamBuilder内的组件通过Navigator.push唤起的，要确保每次push都是新建页面实例，避免旧状态被复用：

// 唤起页面时，直接新建实例，不要复用旧对象
GestureDetector(
  onLongPress: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => PrefixEditor(), // 每次新建实例
      ),
    );
  },
  child: FileNameDisplayCard(),
);

4. 排除样式导致的视觉混淆 #

如果以上都没问题，检查ToggleButtons的样式设置，比如selectedColor和color是否过于接近，导致视觉上看不出选中状态变化。可以临时把选中颜色改成反差大的颜色（比如红色）验证。

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