Flutter中setState()无法更新Text()组件问题求助
问题分析与解决方案
你遇到的UI不更新问题,核心原因是状态变量定义位置错误:你把displayedNumber、input这些需要维护状态的变量放在了build方法内部。每次调用setState()时,Flutter会重新执行build方法,这些变量会被重新初始化回初始值(比如displayedNumber被重置为0.0),导致屏幕上的数值永远不会变化。
修复后的完整代码
import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( home: Home(), )); } class Home extends StatefulWidget { @override State<Home> createState() => _HomeState(); } class _HomeState extends State<Home> { // 将状态变量移到State类的成员位置,避免每次build被重置 String name = 'Amir Mahdi Abravesh'; String phoneNumber = '+989920250829'; double input = 0.00; double displayedNumber = 0.0; // 用计算属性动态生成带$的字符串,避免重复拼接 String get inputST => '\$$displayedNumber'; void displayingDigits(){ if(displayedNumber == 0.0){ displayedNumber += input; } else { displayedNumber = displayedNumber * 10; displayedNumber += input; } } @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, appBar: AppBar( title: Center( child: Text( 'Send Money to', style: TextStyle( color: Colors.black, fontWeight: FontWeight.bold, ), ), ), centerTitle: true, backgroundColor: Colors.white, elevation: 0, ), body: Column( children: <Widget>[ SizedBox(height: 10,), Expanded( child: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ CircleAvatar( backgroundImage: AssetImage('assets/AMA25 trs.png'), backgroundColor: Colors.black, radius: 30, ), SizedBox(height: 5,), Text( '$name', style: TextStyle( fontWeight: FontWeight.bold, fontSize: 20, ), ), SizedBox(height: 5,), Text( '$phoneNumber', style: TextStyle( color: Colors.grey, ), ), ], ), ), ), Expanded( child: Container( padding: EdgeInsets.all(30), child: Column( mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[ // 这里可以直接用inputST显示带$的数值 Text( inputST, style: TextStyle( fontSize: 30, fontWeight: FontWeight.bold, ), ), Divider( height: 30, color: Colors.grey[700], ), Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ TextButton( onPressed: () { setState(() { displayedNumber = 50.0; }); }, child: Container( padding: EdgeInsets.symmetric(vertical: 10, horizontal: 15), decoration: BoxDecoration( border: Border.all(color: Colors.grey), borderRadius: BorderRadius.circular(15), ), child: Text( '\$50', style: TextStyle( color: Colors.grey, ), ), ), ), ], ), ], ), ), ), ], ), ); } }
关键修改点
- 状态变量位置调整:把
name、phoneNumber、input、displayedNumber这些需要保持状态的变量移到_HomeState类的成员区域,脱离build方法,这样它们的数值会在State实例的生命周期内被保留,不会每次build都重置。 - 优化字符串生成:用计算属性
inputST动态生成带$的数值字符串,避免在build方法里重复拼接,代码更简洁高效。
现在点击$50按钮,displayedNumber会被正确设置为50.0,并且UI会实时更新显示这个数值。
内容的提问来源于stack exchange,提问作者Amir Abravesh
相关产品推荐
相关产品推荐

