Flutter 如何从其他组件修改 Stateful 组件的状态变量

Flutter中实现类似UIKit的delegate回调效果，父子组件场景下最轻量化的方案是传递回调函数，符合Flutter单向数据流设计规范，具体修改代码如下：

1. 修改CardWidget定义，新增回调参数 #

class CardWidget extends StatefulWidget {
  // 定义回调类型，用于通知父组件增量按钮被点击
  final VoidCallback onIncrementPressed;
  const CardWidget({Key? key, required this.onIncrementPressed}) : super(key: key);

  @override
  _CardWidgetState createState() => _CardWidgetState();
}

class _CardWidgetState extends State<CardWidget> {
  @override
  Widget build(BuildContext context) {
    return Card(
        child: Column(
      children: [
        Text("Press the button to increment the counter"),
        ElevatedButton(
          onPressed: () {
            // 触发回调，把事件向上传递给父组件处理
            widget.onIncrementPressed();
          },
          child: const Text('Increment'),
        ),
      ],
    ));
  }
}

2. 修改HomePage，传入状态更新逻辑 #

class _HomePageState extends State<HomePage> {
  num counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("Title")),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text(counter.toString()),
              // 实例化CardWidget时传入回调，在回调内处理状态更新
              CardWidget(
                onIncrementPressed: () {
                  setState(() {
                    counter += 1;
                  });
                },
              )
            ],
          ),
        ));
  }
}

修改完成后点击Increment按钮即可触发HomePage的counter更新，界面效果如下：

如果是层级更深的跨组件状态联动，可以根据业务复杂度选择ValueNotifier、ChangeNotifier、Provider等状态管理方案，当前父子组件场景下回调方案是性能最高、实现最简单的选择。

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