使用TextEditingController实时更改文本小部件

Question

我正在学习扑动，现在试图监控TextEditingController上的变化。我可以监视它使用侦听器函数，但是我不能在Text小部件中使用该变量:

class _TestPageState extends State<TestPage> {
var _textName = "";
final _textNameController = TextEditingController();
void _nameChanged() {
_textName = _textNameController.text;
print(
"text controller changed to '${_textNameController.text}' ($_textName)");
}
@override
void initState() {
super.initState();
_textNameController.addListener(_nameChanged);
}
@override
void dispose() {
_textNameController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
children: [
IconButton(
icon: Icon(
Icons.ac_unit,
size: 50,
),
onPressed: () => Navigator.pop(context),
),
TextFormField(
controller: _textNameController,
// onChanged: (value) {
//   _textName = _textNameController.text;
// },
decoration: InputDecoration(
hintText: 'description',
),
),
Text("text is ${_textName}"),
],
),
),
);
}
}

我已经尝试过了，正如你所看到的，使用侦听器并改变变量的值，然后在Text字段中使用变量。然后使用onChanged函数。Text小部件没有变化，除非我在源代码和颤振热重新加载中进行更改。似乎Text是恒定的，但如何呢?

但是，侦听器的输出字符串显示正确的字符串。

我怎么能看到实时更改Text字段，使用TextEditingController?我没看到什么?

Answer 1

需要调用setState来更新ui

void _nameChanged() {
_textName = _textNameController.text;
print(
"text controller changed to '${_textNameController.text}' ($_textName)");
setState(() {});
}