获取文本框的输入值

这个章节讲解的是如何获取文本框的输入值。

In this recipe, learn how to retrieve the text a user has entered into a text field using the following steps:

步骤

Directions

1. 创建一个 TextEditingController

   Create a TextEditingController.

2. 把 TextEditingController 应用到 TextField 上

   Supply the TextEditingController to a TextField.

3. 展示文本框当前值

   Display the current value of the text field.

1. 创建 TextEditingController

1. Create a TextEditingController

为了获取文本框输入值，需要创建一个 TextEditingController。在后续步骤中，这个 TextEditingController 将会被应用到 TextField 上。

To retrieve the text a user has entered into a text field, create a TextEditingController and supply it to a TextField or TextFormField.

TextEditingController 被应用于 TextField 或者 TextFormField 后，就可以使用它来获取文本框输入值。

Once a TextEditingController is supplied to a TextField or TextFormField, we can use it to retrieve the text a user has typed into that text field.

// Define a custom Form widget.
class MyCustomForm extends StatefulWidget {
  const MyCustomForm({Key? key}) : super(key: key);

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

// Define a corresponding State class.
// This class holds the data related to the Form.
class _MyCustomFormState extends State<MyCustomForm> {
  // Create a text controller and use it to retrieve the current value
  // of the TextField.
  final myController = TextEditingController();

  @override
  void dispose() {
    // Clean up the controller when the widget is disposed.
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // Fill this out in the next step.
  }
}

2. 把 TextEditingController 应用到 TextField 上

2. Supply the TextEditingController to a TextField

创建完 TextEditingController，就可以使用 controller 属性完成 text field 绑定。

Now that you have a TextEditingController, wire it up to a text field using the controller property:

return TextField(
  controller: myController,
);

3. 展示文本框当前值

3. Display the current value of the text field

在 TextEditingController 作用于文本框后，就可以开始取值了。通过 TextEditingController 提供的 text() 方法，就能够获取到文本框输入值了。

After supplying the TextEditingController to the text field, begin reading values. Use the text() method provided by the TextEditingController to retrieve the String that the user has entered into the text field.

在下面的示例中，用户点击浮层按钮，将会触发弹出一个对话框，对话框获取并显示文本框的当前值。

The following code displays an alert dialog with the current value of the text field when the user taps a floating action button.

FloatingActionButton(
  // When the user presses the button, show an alert dialog containing
  // the text that the user has entered into the text field.
  onPressed: () {
    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          // Retrieve the text that the user has entered by using the
          // TextEditingController.
          content: Text(myController.text),
        );
      },
    );
  },
  tooltip: 'Show me the value!',
  child: const Icon(Icons.text_fields),
),

交互式样例

Interactive example

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Retrieve Text Input',
      home: MyCustomForm(),
    );
  }
}

// Define a custom Form widget.
class MyCustomForm extends StatefulWidget {
  const MyCustomForm({Key? key}) : super(key: key);

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

// Define a corresponding State class.
// This class holds the data related to the Form.
class _MyCustomFormState extends State<MyCustomForm> {
  // Create a text controller and use it to retrieve the current value
  // of the TextField.
  final myController = TextEditingController();

  @override
  void dispose() {
    // Clean up the controller when the widget is disposed.
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Retrieve Text Input'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: TextField(
          controller: myController,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // When the user presses the button, show an alert dialog containing
        // the text that the user has entered into the text field.
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) {
              return AlertDialog(
                // Retrieve the text the that user has entered by using the
                // TextEditingController.
                content: Text(myController.text),
              );
            },
          );
        },
        tooltip: 'Show me the value!',
        child: const Icon(Icons.text_fields),
      ),
    );
  }
}