Flutter中如何展示点击按钮后值会更新的字符串变量

不能正常展示pressedText的更新值。

问题原因 #

• Flutter采用状态驱动UI更新的机制，只有触发组件的build方法重新执行，页面才会读取最新的变量值完成重渲染
• 你当前将pressedText定义为静态变量，就算按钮点击逻辑中修改了它的值，只要没有主动触发组件重绘，build方法不会重新执行，Text组件展示的永远是初次build时读取的初始值
• 从现有代码判断你大概率使用的是StatelessWidget，或者使用StatefulWidget但修改变量后没有调用setState方法，这都会导致UI不更新

修复方案 #

1. 将当前页面组件改为StatefulWidget，把pressedText从静态变量改为State类的内部成员变量
2. 在按钮的点击回调逻辑中，修改pressedText的值后，必须调用setState(() {})触发组件重绘
3. 参考修改后的核心代码示例：

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

  @override
  State<SecondRoute> createState() => _SecondRouteState();
}

class _SecondRouteState extends State<SecondRoute> {
  // 把pressedText放到State类内作为成员变量，不要用静态变量
  String pressedText = "初始值";

  List<Widget> _buildButtonsWithNames() {
    return [
      ElevatedButton(
        onPressed: () {
          // 修改变量后调用setState触发重绘
          setState(() {
            pressedText = "按钮被点击了";
          });
        },
        child: const Text("点击测试")
      )
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Second Route"),
      ),
      body: Column(
        children: <Widget>[
          Text(
            pressedText,
            style: const TextStyle(
              fontSize: 30.0,
            ),
          ),
          Expanded(
            child: Center(
              child: Wrap(
                children: _buildButtonsWithNames(),
              ),
            ),
          )
        ],
      ),
    );
  }
}

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