获取文本框的输入值

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

步骤

• 创建一个 TextEditingController

• 把 TextEditingController 应用到 TextField 上

• 展示文本框当前值

1. 创建 TextEditingController

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

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

记住：当不再使用 TextEditingController 时，请销毁它以确保相关的资源得到释放。

// Define a Custom Form Widget
class MyCustomForm extends StatefulWidget {
  @override
  _MyCustomFormState createState() => _MyCustomFormState();
}
// Define a corresponding State class. This class will hold the data related to
// our Form.
class _MyCustomFormState extends State<MyCustomForm> {
  // Create a text controller. We will 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) {
    // We will fill this out in the next step!
  }
}

2. 把 TextEditingController 应用到 TextField 上

创建完 TextEditingController，就可以把它作为 TextField 或者 TextFormField 的 controller 属性完成绑定。

TextField(
  controller: myController,
);

3. 展示文本框当前值

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

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

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

完整示例

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Retrieve Text Input',
      home: MyCustomForm(),
    );
  }
}
// Define a Custom Form Widget
class MyCustomForm extends StatefulWidget {
  @override
  _MyCustomFormState createState() => _MyCustomFormState();
}
// Define a corresponding State class. This class will hold the data related to
// our Form.
class _MyCustomFormState extends State<MyCustomForm> {
  // Create a text controller. We will 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: 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 with the
        // text the user has typed into our text field.
        onPressed: () {
          return showDialog(
            context: context,
            builder: (context) {
              return AlertDialog(
                // Retrieve the text the user has typed in using our
                // TextEditingController
                content: Text(myController.text),
              );
            },
          );
        },
        tooltip: 'Show me the value!',
        child: Icon(Icons.text_fields),
      ),
    );
  }
}