Flutter 3 基础09: 获取文本框的值

在上一篇文章中，我们为页面添加了一个文本框并优化了文本框的显示效果。同时，我们也对按钮 文件 my_button.dart 及其类名进行了重命名，满足我们放置更多部件的目的。

文本框的核心功能是接收用户输入的内容。本文将继续增强部件页面上文本框的功能，使其能够获取用户输入的内容。

启动 Android Studio，打开 hello_world 项目，运行虚拟机，这样就可以实时看到编码产生的效果。现在，我们的部件页面展示了文本框和按钮两个部件。

配置文本框控制器

1. 在 lib/widget 文件夹下，打开 my_widgets.dart 文件，定位到下列代码：

class MyWidgets extends StatelessWidget {

2. 在 MyWidgets 上，点击鼠标右键，打开如下菜单：

3. 在弹出的菜单中，选择点击 Show Context Actions 选项，弹出如下菜单：

4. 在新弹出的菜单中，选择点击 Convert to StatefulWidget 选项。
5. Android Studio 自动创建了一个 _MyWidgetsState 类用来管理状态，从而把 MyWidgets 从无状态部件转变为有状态部件。

class _MyWidgetsState extends State<MyWidgets> {  
  @override  
  Widget build(BuildContext context) {  
    return Column(  
      children: [  
        const TextField(  
          decoration: InputDecoration(  
              border: OutlineInputBorder(),  
              hintText: "请输入一些文字。"),  
        ),  
        MaterialButton(  
          textColor: Colors.white,  
          color: Colors.green,  
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),  
          onPressed: () {  
            print('按钮被点击');  
          },  
          child: const Text('显示'),  
        )  
      ],  
    );  
  }  
}

6. 继续在 my_widgets.dart 文件中，定位到下列代码：

class _MyWidgetsState extends State<MyWidgets> {

在这一行代码的下面，添加如下代码：

final _textController = TextEditingController();

7. 继续在 my_widgets.dart 文件中，定位到下列代码：

const TextField(

删除这一行代码中的 const 关键字，并在其下面添加如下代码：

controller: _textController,

8. 继续在 my_widgets.dart 文件中，定位到下列代码：

decoration: InputDecoration(

把这一行代码，替换为如下代码，消除编辑器提示的警告：

decoration: const InputDecoration(

9. 继续在 my_widgets.dart 文件中，定位到下列代码：

final _textController = TextEditingController();

在这一行代码的下面，添加如下代码：

@override  
void dispose() {  
  _textController.dispose();  
  super.dispose();  
}

获取文本框内容

1. 继续在 my_widgets.dart 文件中，定位到下列代码：

print('按钮被点击');

把这一行代码，替换为如下代码：

print(_textController.text);

2. 热重启项目。点击部件导航图标，在页面的文本框中输入一些内容，例如，Hello Flutter.

3. 点击绿色的显示按钮。
4. 查看控制台输出，可以看到，我们获取到了用户在文本框中输入的内容。

提交代码

我们已经实现了文本框内容的获取，又到达了一个小小的里程碑，应该对代码进行提交，保持良好编程习惯。

git add .
git commit -m '获取文本框的内容。'