273

我想为文本字段提供初始值并用空值重绘它以清除文本。使用 Flutter 的 API 做到这一点的最佳方法是什么？

4

14 回答 14

190

您可以使用 aTextFormField而不是TextField，并使用该initialValue属性。例如

TextFormField(initialValue: "I am smart")
于 2018-07-17T13:18:37.087 回答
176

（来自邮件列表。我没有想出这个答案。）

class _FooState extends State<Foo> {
  TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = new TextEditingController(text: 'Initial value');
  }

  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new TextField(
          // The TextField is first built, the controller has some initial text,
          // which the TextField shows. As the user edits, the text property of
          // the controller is updated.
          controller: _controller,
        ),
        new RaisedButton(
          onPressed: () {
            // You can also use the controller to manipuate what is shown in the
            // text field. For example, the clear() method removes all the text
            // from the text field.
            _controller.clear();
          },
          child: new Text('CLEAR'),
        ),
      ],
    );
  }
}
于 2017-04-04T17:52:01.617 回答
138

您不必在小部件范围内定义单独的变量，只需内联：

TextField(
  controller: TextEditingController()..text = 'Your initial value',
  onChanged: (text) => {},
)
于 2019-06-11T04:57:21.197 回答
56

我在这里看到了很多这样做的方法。但是，我认为这比其他答案更有效或至少简洁。

TextField(
   controller: TextEditingController(text: "Initial Text here"),
)
于 2019-12-09T19:02:00.387 回答
42

如果您使用的是TextEditingController然后将文本设置为它，如下所示

TextEditingController _controller = new TextEditingController();


_controller.text = 'your initial text';

final your_text_name = TextFormField(
      autofocus: false,
      controller: _controller,
      decoration: InputDecoration(
        hintText: 'Hint Value',
      ),
    );

如果你没有使用任何TextEditingController那么你可以直接使用initialValue如下

final last_name = TextFormField(
      autofocus: false,
      initialValue: 'your initial text',
      decoration: InputDecoration(
        hintText: 'Last Name',
      ),
    );

更多参考TextEditingController

于 2018-12-17T13:42:37.863 回答
29

这可以使用TextEditingController.

要获得初始值，您可以添加

TextEditingController _controller = TextEditingController(text: 'initial value');

或者

如果你正在使用TextFormField，你在那里有一个initialValue财产。它基本上initialValue自动将其提供给小部件。

TextFormField(
  initialValue: 'initial value'
)

要清除文本，您可以使用 _controller.clear()方法。

于 2019-11-12T11:56:51.293 回答
13

如果您想TextInput按照@MRT 在已接受答案的评论中的要求处理多个 s，您可以创建一个函数，该函数采用初始值并返回TextEditingController如下所示：

initialValue(val) {
  return TextEditingController(text: val);
}

然后，将此函数设置为控制器并在TextInput那里提供其初始值，如下所示：

controller: initialValue('Some initial value here....')

TextInput您可以对其他s重复此操作。

于 2018-11-25T08:42:15.083 回答
7 
class _YourClassState extends State<YourClass> {
  TextEditingController _controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    _controller.text = 'Your message';
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: TextFormField(
        controller: _controller,
        decoration: InputDecoration(labelText: 'Send message...'),
      ),
    );
  }
}
于 2020-11-12T20:40:06.803 回答
7 
TextEdittingController _controller = new TextEdittingController(text: "your Text");

或者

@override
  void initState() {
    super.initState();
    _Controller.text = "Your Text";
    }
于 2019-10-24T06:49:31.460 回答
4

课内，

  final usernameController = TextEditingController(text: 'bhanuka');

文本域，

   child: new TextField(
        controller: usernameController,
    ...
)
于 2019-01-30T07:16:38.420 回答
2

简单有效的方法

将控制器分配给您的TextFormFieldorTextField并且initState您可以像这样将其初始化为初始值

_controller = TextEditingController(text: 'Your initial value');
于 2021-07-17T19:59:13.493 回答
1
  1. 当你使用 TextEditingController

如果您使用 TextEditingController，请将其文本字段设置为所需的值

TextEditingController txtController = TextEditingController()..text = 'Your initial text value'; 
TextField( controller: txtController ..... )
  1. 当你不使用 TextEditingController

如果您不使用 TextEditingContller，请直接使用 TextField 小部件中的 initialValue 字段：

TextFormField( initialValue: "Your initial text value" )
于 2021-10-03T15:11:35.393 回答
1

您可以执行上述所有操作，但是，如果您希望 API 在加载数据时显示您的数据，它会显示为个人资料页面。所以这里是代码：

TextEditingController _nameController = TextEditingController(); // initialize the controller
 // when API gets the data, do this:
 _nameController.text = response.data.fullName; or _nameController.text = "Apoorv Pandey"

我希望它能清除一切。快乐编码！

于 2021-05-13T10:08:28.140 回答
1

由于没有一个答案提到它，因此TextEditingController 应该在使用后将其丢弃。如：

class MyWidget extends StatefulWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  MyWidgetState createState() => MyWidgetState();
}

class MyWidgetState extends State<MyWidget> {
  final myController = TextEditingController(text: "Initial value");

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: myController,
    );
  }

  @override
  void dispose() {
    // dispose it here
    myController.dispose();
    super.dispose();
  }
}
于 2022-01-12T17:32:13.547 回答