如何实时监听TextField内容变化并更新Text组件？

你的代码无法实时更新Text组件的核心原因是：TextEditingController的text属性变化不会自动触发Widget树重建，所以即使输入内容改变，Text组件也不会重新渲染。下面提供两种可行的解决方案：

方案一：监听控制器变化并触发setState #

通过给TextEditingController添加监听器，在内容变化时调用setState()触发页面重建，让Text组件读取最新的输入内容。

修改后的完整代码：

late final TextEditingController _importo;

@override
void initState() {
  super.initState();
  _importo = TextEditingController();
  // 添加监听器，内容变化时触发重建
  _importo.addListener(() {
    setState(() {});
  });
}

@override
void dispose() {
  // 销毁控制器，避免内存泄漏
  _importo.dispose();
  super.dispose();
}

@override
Widget build(BuildContext context) {
  return Column(children: [
    SizedBox(
      width: 50,
      child: TextField(
        textAlign: TextAlign.end,
        controller: _importo,
        decoration: const InputDecoration(
          hintText: '0.00',
        ),
        autocorrect: false,
        keyboardType: TextInputType.number,
      ),
    ),
    Text(
      _importo.text,
      style: const TextStyle(
        fontWeight: FontWeight.w400,
        fontSize: 15,
      ),
    ),
  ]);
}

方案二：使用ValueListenableBuilder（更高效） #

ValueListenableBuilder可以监听TextEditingController的变化，自动更新子Widget，无需手动调用setState()，性能更优。

修改后的完整代码：

late final TextEditingController _importo;

@override
void initState() {
  super.initState();
  _importo = TextEditingController();
}

@override
void dispose() {
  _importo.dispose();
  super.dispose();
}

@override
Widget build(BuildContext context) {
  return Column(children: [
    SizedBox(
      width: 50,
      child: TextField(
        textAlign: TextAlign.end,
        controller: _importo,
        decoration: const InputDecoration(
          hintText: '0.00',
        ),
        autocorrect: false,
        keyboardType: TextInputType.number,
      ),
    ),
    // 用ValueListenableBuilder包裹Text组件
    ValueListenableBuilder<TextEditingValue>(
      valueListenable: _importo,
      builder: (context, value, child) {
        return Text(
          value.text,
          style: const TextStyle(
            fontWeight: FontWeight.w400,
            fontSize: 15,
          ),
        );
      },
    ),
  ]);
}

注意：两种方案都需要在dispose()方法中销毁TextEditingController，避免内存泄漏。

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