ElevatedButton点击后文本值不更新问题求助

问题根源 #

1. 全局变量无法触发State重绘：你把myVariableNumber定义在_MyHomePageState类外部，属于全局变量。Flutter的StatefulWidget仅会在内部状态变量通过setState更新时触发build方法重执行，全局变量的变化不会被State感知。
2. 未调用setState通知状态变化：即使变量在State内部，不通过setState通知框架，Flutter也不会重新渲染界面。
3. 错误使用Navigator.push：这个方法用于页面跳转，不是刷新当前页面，因此会导致路由报错。

修正后的代码 #

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 将变量移到State类内部作为状态变量
  int myVariableNumber = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Hello World"),
        backgroundColor: Colors.black,
      ),
      backgroundColor: Colors.black,
      body: Container(
        alignment: Alignment.center,
        width: 300,
        height: 300,
        color: Colors.white,
        child: SizedBox(
          width: 140,
          height: 70,
          child: ElevatedButton(
            onPressed: () {
              // 用setState包裹变量更新，触发界面重绘
              setState(() {
                myVariableNumber += 1;
              });
            },
            child: Text('Hello $myVariableNumber'),
          ),
        ),
      ),
    );
  }
}

关键改动说明 #

• 将myVariableNumber移至_MyHomePageState内部，转为状态变量，让State可以追踪其变化。
• 在按钮点击回调中，用setState包裹变量更新操作。setState会通知Flutter框架状态已变，触发build方法重新执行，从而更新按钮文本。
• 移除错误的Navigator.push代码，刷新当前页面无需路由跳转，setState即可完成界面更新。

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