3.1.2　文本输入组件（TextField）

TextField组件常用的属性及说明如表3-4所示。

表3-4　TextField属性

例如，输入框需求如下：圆角边框、文本居中、只能输入英文字符，代码如下：

TextField(
          decoration: InputDecoration(
            filled: true,
            border: OutlineInputBorder(
                borderRadius: BorderRadius.all(Radius.circular(20))),
          ),
          textAlign: TextAlign.center,
          inputFormatters: [
            WhitelistingTextInputFormatter(RegExp("[a-zA-Z]")),
          ],
        ),

运行结果如图3-6所示。

图3-6　TextField实现圆角框和英文字符居中

密码输入框，代码如下：

TextField(
            decoration: InputDecoration(labelText: '请输入密码'),
            obscureText: true,
          ),

运行结果如图3-7所示。

图3-7　密码输入框