Flutter调用setState修改类成员后UI不更新问题咨询

核心原因 #

• StatefulWidget的不可变性约束：StatefulWidget本身是不可变类（immutable），其属性必须定义为final。直接修改mWidget实例的text属性，违背了Flutter的设计规则，框架无法检测到这种修改，因此不会触发组件重建。
• 状态维护位置错误：你将text属性存储在mWidget实例内部，而非父组件的State（_MainState）中。调用setState时，父组件会重建，但mWidget并未接收到新的text值，所以子组件仍使用初始值渲染。

正确实现示例 #

子组件（mWidget）的正确写法

class mWidget extends StatefulWidget {
  final String text; // 用final定义不可变属性

  const mWidget({super.key, required this.text});

  @override
  State<mWidget> createState() => _mWidgetState();
}

class _mWidgetState extends State<mWidget> {
  @override
  Widget build(BuildContext context) {
    return Text(widget.text); // 通过widget.text获取父组件传递的值
  }
}

父组件的正确写法

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

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  String _displayText = "Hi"; // 在父State中维护状态

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          mWidget(text: _displayText), // 将状态传递给子组件
          const SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              setState(() {
                _displayText = "Hello"; // 更新父State中的状态
              });
            },
            child: const Text("切换文本"),
          ),
        ],
      ),
    );
  }
}

说明 #

修改后，点击按钮时setState会更新父State中的_displayText，父组件重建时会将新值传递给mWidget，子组件的build方法会使用新的widget.text重新渲染，界面就能实时更新了。

内容的提问来源于stack exchange，提问作者Ertuğrul Faruk Pişkin