Flutter：在Widget外部调用setState无效？求原因解析

首先明确：可以在Widget外部调用setState，但你的代码存在三个核心错误导致无法触发渲染更新。

错误1：没有正确执行setState #

你在ChildWidgetState的initState里写了：

Renderer.setStateChild = () => setState;

这里只是返回了setState函数的引用，但调用Renderer.setStateChild()时，并没有实际执行setState方法。正确的写法有两种：

// 写法1：直接赋值setState方法本身
Renderer.setStateChild = setState;

// 写法2：包装成直接执行setState的函数
Renderer.setStateChild = () => setState(() {});

对应的调用方式也要匹配：

// 写法1需要传回调
Renderer.setStateChild(() {});
// 写法2直接调用即可
Renderer.setStateChild();

错误2：状态变量定义在build方法内 #

你在MyAppState的build方法里定义了int number = 0;，build方法每次执行都会重新初始化这个变量，所以你点击按钮执行number++后，下次组件重建时number又会变回0，完全无法保存状态。

正确的做法是把number提升为State类的成员变量：

class MyAppState extends State<MyApp> {
  // 把number作为状态成员放在这里
  int number = 0;

  @override
  Widget build(BuildContext context) {
    ScreenSizes.init(MediaQuery.of(context).size);
    // 删除这里的int number = 0;
    return MaterialApp(...);
  }
}

错误3：父组件未触发自身重建，子组件拿不到新状态 #

即使修正了前两个问题，ChildWidget的widget.number也不会更新——因为MyAppState的number变化后，没有调用自身的setState触发build，所以ChildWidget永远只会收到初始的0值。

你需要在点击按钮时，先更新number，再调用MyAppState的setState，确保子组件能拿到最新的number：

floatingActionButton: FloatingActionButton(
  onPressed: () {
    setState(() {
      number++;
    });
    // 若确实需要单独触发子组件的setState（这里其实没必要，父组件重建后子组件会自动更新）
    // Renderer.setStateChild?.call(() {});
  },
  child: const Icon(Icons.add),
),

修正后的完整代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class Renderer {
  static Function? setStateChild; 
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

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

class MyAppState extends State<MyApp> {
  int number = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ChildWidget(number),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              number++;
            });
            // 若需要单独触发子组件的setState可保留此调用
            Renderer.setStateChild?.call(() {});
          },
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

class ChildWidget extends StatefulWidget {
  final int number;

  const ChildWidget(this.number, {super.key});

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

class ChildWidgetState extends State<ChildWidget> {

  @override
  void initState() {
    print("registered setStateChild");
    Renderer.setStateChild = setState;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Center(child: Text(widget.number.toString()));
  }
}

关键总结 #

1. setState是State类的实例方法，只要能拿到它的引用（比如通过静态变量传递），外部可以调用，但必须正确执行它（传入回调或直接调用）。
2. 状态变量绝对不能放在build方法内，否则每次组件重建都会丢失状态。
3. 父组件的状态变化需要触发自身的setState，才能将新状态传递给子组件，子组件才会跟着重建。

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