Flutter：如何在TextField值变更时自动同步更新Text Widget

要实现不管是用户输入修改TextField值，还是通过按钮等外部操作修改，都能同步更新Text Widget，核心是用TextEditingController的监听器来替代（或补充）onChanged回调——因为onChanged只在用户键盘输入时触发，外部修改controller文本不会触发它，但监听器能捕捉所有值变更场景。

具体实现步骤： #

• 在State的initState方法中，给_controller添加监听器，监听器里更新目标文本并调用setState刷新UI。
• 在dispose方法中移除监听器，避免内存泄漏。
• 可以删掉原来的onChanged回调，因为监听器已经覆盖了所有值变更的情况。

修改后的完整代码： #

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late TextEditingController _controller;
  String _helloText = 'Hello 0';

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController(text: '0');
    // 添加监听器监听controller值变化
    _controller.addListener(_updateHelloText);
  }

  void _updateHelloText() {
    setState(() {
      _helloText = 'Hello ${_controller.text}';
    });
  }

  @override
  void dispose() {
    // 移除监听器并销毁controller
    _controller.removeListener(_updateHelloText);
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Number Incrementer'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              _helloText,
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            TextField(
              controller: _controller,
              keyboardType: TextInputType.number,
              // 此处可删除onChanged，监听器已处理所有场景
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                int currentValue = int.tryParse(_controller.text) ?? 0;
                currentValue++;
                // 直接修改controller文本，监听器会自动触发更新
                _controller.text = currentValue.toString();
              },
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

原方法失效的原因： #

原来的onChanged是TextField组件的回调，只有当用户通过键盘输入、删除等交互修改内容时才会被调用。而通过按钮点击直接给_controller.text赋值属于外部修改，不会触发TextField的onChanged，所以Text Widget不会更新。

而TextEditingController的监听器是监听自身的value变化，不管这个变化来自用户输入还是外部赋值，都会触发回调，从而保证Text Widget始终和TextField的值同步。

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