Flutter 文本框组件

Flutter 文本框组件(TextField)，只要是应用程序，就会涉及交互，文本输入是最常见的一种交互方式。TextField就是用于进行文本输入的组件。注意要将TextField和Text组件区分开来，Text组件主要用于显示文本，并不接受输入文本。TextField常用属性见表：

对于TextField无须做过多处理，默认Material Design的效果就非常漂亮。代码如下所示：

TextField()

假设还想获取文本内容，仅有输入框还不够，还需要传递controller给TextField，用来监听文本内容的变化，这是一种绑定的机制。初始化监听器的代码如下所示：

final TextEditingController controller = TextEditingController();
controller.addListener(() {
      // TODO
});

绑定监听器的代码如下所示：

child: TextField(
  controller: controller,
),

当在文本框里输入“hello world ”时，会发现在控制台里文字是一个一个打印出来的。原因是只要监听器发现文本内容发生变化，就会触发回调函数输出内容。输出结果如下：

flutter: 你输入的内容为:
flutter: 你输入的内容为: h
flutter: 你输入的内容为: he
flutter: 你输入的内容为: hel
flutter: 你输入的内容为: hell
flutter: 你输入的内容为: hello
flutter: 你输入的内容为: hello
flutter: 你输入的内容为: hello w
flutter: 你输入的内容为: hello wo
flutter: 你输入的内容为: hello wor
flutter: 你输入的内容为: hello worl
flutter: 你输入的内容为: hello world

接下来可以再给TextField添加一些属性用来进行更多的控制，比如最大长度，最大行数，是否自动对焦，内容提交回调等。添加常规属性后效果如图所示:

最后再给文本框添加一些装饰效果，比如填充色、图标等，需要用到InputDecoration组件。代码如下所示：

decoration: InputDecoration

完整的示例代码如下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 添加文本编辑控制器，监听文本输入内容变化
    final TextEditingController controller = TextEditingController();
    controller.addListener(() {
      print('你输入的内容为: ${controller.text}');
    });

    return MaterialApp(
        title: 'TextField组件示例',
        home: Scaffold(
          appBar: AppBar(
            title: Text('TextField组件示例'),
          ),
          body: Center(
            child: Padding(
              padding: const EdgeInsets.all(20.0),
              child: TextField(
                // 绑定controller
                controller: controller,
                // 最大长度，设置此项会让TextField右下角有一个输入数量的统计字符串
                maxLength: 30,
                // 最大行数
                maxLines: 1,
                // 是否自动更正
                autocorrect: true,
                // 是否自动对焦
                autofocus: true,
                // 是否是密码
                obscureText: false,
                // 文本对齐方式
                textAlign: TextAlign.center,
                // 输入文本的样式
                style: TextStyle(fontSize: 26.0, color: Colors.green),
                // 文本内容改变时回调
                onChanged: (text) {
                  print('文本内容改变时回调 $text');
                },
                // 内容提交时回调
                onSubmitted: (text) {
                  print('内容提交时回调 $text');
                },
                enabled: true,                                //是否禁用
                decoration: InputDecoration(              //添加装饰效果
                      fillColor: Colors.grey.shade200,    //添加灰色填充色
                      filled: true,
                      helperText: '用户名',
                      prefixIcon: Icon(Icons.person),     //左侧图标
                      suffixText: '用户名'),                 //右侧文本提示
              ),
            ),
          ),
        ),
      );
    }
  }

上述示例代码的视图展现大致如图所示:

酷客教程相关文章：

• Flutter 轻量提示组件
• Flutter 提示对话框组件
• Flutter 简单对话框组件
• Flutter 弹出菜单组件