如何实时监听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,
          ),
        ),
      ]);
    }
  }

我认为有些东西缺失了，因为文本小部件没有更新。

- faccio

Answer 1

在文本框的更改事件中设置状态

TextField (
 onChanged:(val){
   setState((){});
  }
)

编辑

import 'package:flutter/material.dart';



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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
     
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  TextEditingController _textController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
       children: [
         Container(
           color: Colors.grey.withOpacity(0.2),
           child: Text("${_textController.text}")),
         SizedBox(height: 20),
         Container(
           color: Colors.grey,
           child: TextField(
             
             controller: _textController,
             onChanged: (val){
               setState((){});
             }
           ),
         )
       ]
      ),
    );
  }
}

- Kaushik Chandru

---

Text小部件没有显示，也没有显示"0.00"或其他内容，只是空白空间。 - faccio

编辑了我的答案，并附上了一个可行的示例。 - Kaushik Chandru

看起来我的 Text 小部件没有显示是因为我在 showDialog 中工作。现在我尝试使用 StatefulWidget，它正在工作。 - faccio

Answer 2

你的代码在initState中存在作用域问题，文本将自动更新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,
        ),
      ),
    ]);
  }
}

- Yeasin Sheikh

---

Text小部件没有显示。 - faccio

你在哪里测试这段代码片段？能否多提供一些关于父部件的信息？ - Yeasin Sheikh

我注意到问题是我在showDialog中使用了this，我将它移动到StateFulWidget中，现在它可以正常工作。 - faccio

在对话框内，您还可以使用StatefulBuilder包装对话框内容并使用其setState方法。无论是StatelessWidget还是StatefulBuilder都可以使用。 - Yeasin Sheikh