Flutter子组件修改变量后，如何更新父组件UI？

问题原因 #

你修改父组件的counter变量后，没有调用setState(() {})触发状态更新。Flutter的StatefulWidget只有在调用setState时，才会重新执行build方法并更新UI。虽然counter的值确实发生了变化，但因为没有触发状态更新，界面不会重新渲染，所以看不到最新的数值。

解决方案 #

在父组件的回调方法中，将counter的修改包裹在setState里，触发UI更新：

修改后的父组件代码：

class _ParentWidgetState extends State<ParentWidget> {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            SizedBox(height: 100),
            Text(
              '$counter',
              style: TextStyle(fontSize: 20, color: kWhite),
            ),
            Button(
              isPressed: (isPressed) {
                setState(() {
                  // 在这里修改counter，触发状态更新
                  isPressed ? counter++ : counter--;
                });
                print(counter);
              },
            ),
          ],
        ),
      ),
    );
  }
}

针对多按钮场景的优化 #

你提到不想在父组件中维护大量按钮的bool变量和setState，当前的实现已经符合这个需求：

• 按钮的选中状态（buttonPressed）完全由子组件Button自己管理，父组件不需要关心每个按钮的状态，只需要处理业务逻辑（修改counter）。
• 如果后续按钮数量增多、业务逻辑复杂，可以考虑引入轻量状态管理工具（比如Riverpod或Provider），将counter的状态抽离到单独的状态类中，进一步简化父组件的代码。

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