Flutter中使用TextEditingController实现Text组件实时更新问题

核心原因 #

问题本质是修改数据后未触发Widget重建——Flutter仅在状态变更时才会重新渲染界面，所以即便控制台能打印出最新内容，UI也不会自动同步更新。

正确实现方案 #

1. StatefulWidget + setState（基础通用方案） #

如果你的页面是StatelessWidget，必须先改成StatefulWidget，再通过setState通知Flutter更新UI：

class InputPage extends StatefulWidget {
  @override
  _InputPageState createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  final TextEditingController _inputController = TextEditingController();
  String _displayText = "";

  @override
  void initState() {
    super.initState();
    // 给控制器添加内容监听
    _inputController.addListener(() {
      setState(() {
        _displayText = _inputController.text;
      });
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          TextField(controller: _inputController),
          Text(_displayText), // 实时同步输入内容
        ],
      ),
    );
  }
}

2. 直接绑定控制器文本（更简洁写法） #

无需额外维护变量，直接将Text组件与控制器的text属性绑定，只需在监听器中调用空的setState触发重建：

@override
void initState() {
  super.initState();
  _inputController.addListener(() {
    setState(() {}); // 空回调即可触发UI重建
  });
}

// Build方法中的Text组件
Text(_inputController.text),

3. onChanged替代监听器（同样需配合setState） #

如果你倾向使用onChanged回调，也要在回调内调用setState更新状态：

TextField(
  onChanged: (value) {
    setState(() {
      _displayText = value;
    });
  },
),
Text(_displayText),

常见错误排查 #

• 误用StatelessWidget：无状态组件无法触发UI更新，必须改为StatefulWidget。
• 遗漏setState：无论用监听器还是onChanged，修改数据后必须调用setState通知Flutter重建。
• 控制器未正确管理：务必在initState添加监听，dispose中销毁控制器，避免内存泄漏。

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