flutter - 如何实时收听 TextField 更改并使用 TextField 内容更新 Text 小部件？

Question

我有一个 TextField 和一个 Text 小部件，它们应该实时显示在 TextField 中编写的文本。

这是代码:

 late final TextEditingController _importo;

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

    @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,
          ),
        ),
      ]);
    }
  }

我认为缺少某些内容，因为文本小部件没有更新。

Answer 1

您在 initState 上的代码存在范围(brackaet)问题，文本将在 textField 上自动更新，并添加监听器在文本更改时更新其他 UI 小部件。

 late final TextEditingController _importo;

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

  @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,
        ),
      ),
    ]);
  }
}