Flutter 输入框 TextField、表单 Form 图文示例

爱被打了一巴掌 2023-05-28 15:54 1阅读 0赞

### 文章目录 ###

*   *   *  输入框 TextField
         *   *  默认效果
             *  监听内容变化，获取输入框的内容
             *  和键盘的交互
             *  美化 TextField 样式
         *  表单 Form 验证
         *   *  输入框内容校验
             *  输入框内容重置
             *  输入内容保存
         *  登录页面例子

### 输入框 TextField ###

TextField用于文本输入，它提供了很多属性：

const TextField({
        Key key,
        this.controller,// 控制器
        this.focusNode, // 控制TextField是否占有当前键盘的输入焦点
        this.decoration = const InputDecoration(), // 控制TextField的外观显示
        TextInputType keyboardType,// 输入框默认的键盘输入类型
        this.textInputAction,
        this.textCapitalization = TextCapitalization.none,
        this.style,//输入文本的样式
        this.strutStyle,
        this.textAlign = TextAlign.start,//文本对齐方式
        this.textAlignVertical,
        this.textDirection,
        this.readOnly = false,
        ToolbarOptions toolbarOptions,
        this.showCursor,// 显示光标
        this.autofocus = false,//是否自动对焦
        this.obscureText = false,//是否隐藏输入的内容
        this.autocorrect = true,//是否自动更正
        this.enableSuggestions = true,
        this.maxLines = 1,// 最大行数
        this.minLines,//最小行数
        this.expands = false,
        this.maxLength,//最大长度
        this.maxLengthEnforced = true,
        this.onChanged,// 输入框变化回调
        this.onEditingComplete,// 编辑完成回调
        this.onSubmitted,// 提交回调
        this.inputFormatters,//允许的输入格式
        this.enabled,//是否禁用textfield
        this.cursorWidth = 2.0,// 光标宽度
        this.cursorRadius,//光标半径
        this.cursorColor,//光标颜色
        this.keyboardAppearance,
        this.scrollPadding = const EdgeInsets.all(20.0),
        this.dragStartBehavior = DragStartBehavior.start,
        this.enableInteractiveSelection = true,
        this.onTap,
        this.buildCounter,
        this.scrollController,
        this.scrollPhysics,
      })

字段太多了，我们从几个示例来了解主要字段的使用。

#### 默认效果 ####

只有一条下划线，也没有自动获取焦点。

TextField();

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]

#### 监听内容变化，获取输入框的内容 ####

如果我们要获取输入的内容，这时候可以通过`onChange, onSubmitted`，伪代码如下：

Widget _buildTextField(){
        return TextField(
          onChanged: (text) {
            //内容改变的回调
            print('change $text');
          },
          onEditingComplete:(){
            print('editing ');
          },
          onSubmitted: (text) {
            //内容提交(按回车)的回调
            print('submit $text');
          },
        );
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 2]

#### 和键盘的交互 ####

**默认获取焦点**  
只需要将`autofocus`设置为`true`即可。

Widget _buildTextField(){
            return TextField(
              autofocus: true,
            );
        }

**改变键盘右下角的功能键**

Widget _buildTextField(){
            return TextField(
              autofocus: true,
              keyboardType: TextInputType.text,
              // 右下角按钮变为：前往或者Go
              textInputAction:TextInputAction.go,
            );
        }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 4]

**改变键盘的输入类型**

Widget _buildTextField(){
            return TextField(
              autofocus: true,
              keyboardType: TextInputType.number,
              // 将键盘显示类型设置为数字键盘
              keyboardType: TextInputType.number,
            );
        }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 6]  
**如何自适应屏幕弹起**

目前来看`TextField`已满足一个输入框的功能了。  
但是它太丑了，这不符合`Flutter`构建一个漂亮`App`的目标

#### 美化 TextField 样式 ####

主要是使用`TextField`自带的字段修改，或者使用`InputDecoration`修改样式。  
`TextField`的常用字段我们在上面已经给出注释了，接下来查看`InputDecoration`的常见字段：

字段基本释义来源：[Flutter文本输入框TextField属性（InputDecoration、textInputAction、inputFormatters等等）详解][Flutter_TextField_InputDecoration_textInputAction_inputFormatters]

const InputDecoration({
        this.icon, //位于装饰器外部和输入框前面的图片
        this.labelText,//用于描述输入框，当输入框获取焦点时默认会浮动到上方，
        this.labelStyle,// 控制labelText的样式
        this.helperText,//辅助文本，位于输入框下方，如果errorText不为空的话，则helperText不会显示
        this.helperStyle,//helperText的样式
        this.helperMaxLines,//提示信息最大行数
        this.hintText,//提示文本，位于输入框内部
        this.hintStyle,//hintText的样式
        this.hintMaxLines,//提示信息最大行数
        this.errorText,//errorText的信息
        this.errorStyle,//errorText的样式
        this.errorMaxLines, //errorText的最大行数
        this.hasFloatingPlaceholder = true, //labelText是否浮动，默认为true
        this.isDense,//改变输入框是否为密集型
        this.contentPadding,//内间距
        this.prefixIcon,//位于输入框内部起始位置的图标。
        this.prefix,//预先填充的Widget,跟prefixText同时只能出现一个
        this.prefixText,//预填充的文本，例如手机号前面预先加上区号等
        this.prefixStyle,//prefixText的样式
        this.suffixIcon,//位于输入框后面的图片
        this.suffix, //位于输入框尾部的控件，同样的不能和suffixText同时使用
        this.suffixText,//位于尾部的填充文字
        this.suffixStyle, //suffixText的样式
        this.counter,//位于输入框右下方的小控件，不能和counterText同时使用
        this.counterText,//位于右下方显示的文本，常用于显示输入的字符数量
        this.counterStyle,//counterText的样式
        this.filled,//如果为true，则输入使用fillColor指定的颜色填充
        this.fillColor,//输入框的背景颜色
        this.focusColor,//输入框有焦点时的边框颜色
        this.hoverColor,//输入框被悬浮时的边框颜色
        this.errorBorder,//errorText不为空，输入框没有焦点时要显示的边框
        this.focusedBorder,//输入框有焦点时的边框
        this.focusedErrorBorder,//errorText不为空时，输入框有焦点时的边框
        this.disabledBorder,//输入框禁用时显示的边框
        this.enabledBorder,//输入框可用时显示的边框
        this.border,//正常情况下的border
        this.enabled = true,//输入框是否可用
        this.semanticCounterText,
        this.alignLabelWithHint,
      })

接下来我们通过几个例子来看看实现的效果图。

**游标颜色、粗细，控制输入长度**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 7]

**密码框**  
增加`obscureText: true,`属性即可实现输入的内容是隐藏的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 8]  
**改变下划线颜色**  
默认下划线是跟随主题的红色，这里将其改为橘色700。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 9]

Widget _buildTextField(){
            return Container(
              child: TextField(
                  autofocus: true,
                  decoration: InputDecoration(
                      border: InputBorder.none //隐藏下划线
                  )
              ),
              decoration: BoxDecoration(
                // 下滑线橘色700，宽度3像素
                  border: Border(bottom: BorderSide(color: Colors.orange[700], width: 3.0))
              ),
            );
        }

**圆角输入框**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 10]

Widget _buildTextField(){
            return TextField(
              autofocus: true,
              cursorColor: Colors.deepOrange,
              cursorRadius: Radius.circular(20.0),
              cursorWidth: 10.0,
              maxLength: 10,
              obscureText: true,
              decoration: InputDecoration(
              	 //  文本内容的内边距
                  contentPadding: EdgeInsets.all(10.0),
                  // 圆角矩形的输入框样式
                  border: OutlineInputBorder(
                    // 圆角半径 10
                    borderRadius: BorderRadius.circular(10.0),
                  )),
            );
        }

**带有图标输入框**  
使用`InputDecoration`常见的一些属性完成了以下的效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 11]

Widget _buildTextField(){
            return Column(
              children: <Widget>[
                TextField(
                  decoration: InputDecoration(
                    icon: Icon(Icons.supervised_user_circle),
                      suffixIcon: Icon(Icons.search),
                      prefixText: 'prefixText ',
                      suffixText: 'suffixText',
                      labelText: "用户名",
                      helperText: '请输入用户名、手机号',
                      hintText: "用户名或手机号",
                      prefixIcon: Icon(Icons.person)
                  ),
                ),
                TextField(
                  decoration: InputDecoration(
                      prefixIcon: Icon(Icons.lock),
                      suffixIcon: Icon(Icons.remove_red_eye),
                      labelText: "密码",
                      hintText: "您的登录密码",
                      hintStyle: TextStyle(color: Colors.grey, fontSize: 13.0)
                  ),
                  obscureText: true,
                )
              ],
            );
        }

### 表单 Form 验证 ###

`Flutter`提供了一个`Form` 组件，它可以对输入框进行分组。`Form`对应的状态类为`FormState`，可以通过`Form.of()`或`GlobalKey`获得。获得状态类之后就可以做统一操作了如：

*  `FormState.validate()`：调用此方法后，会调用`子孙FormField`的`validate`回调，如果有一个校验失败，则返回`false`，所有校验失败项都会返回用户返回的错误提示。
 *  `FormState.save()`：调用此方法后，会调用`子孙FormField`的`save`回调，用于保存表单内容
 *  `FormState.reset()`：调用此方法后，会将`子孙FormField`的内容清空。

![在这里插入图片描述][20200318145824329.gif]

#### 输入框内容校验 ####

*  自动校验

`autovalidate: true, //开启自动校验`，在 `Form` 组件下设置该属性为`true`

*  手动校验

通过点击按钮来校验`Form`中所有`TextField`的信息。

1.  定义全局的 `key`，用于获取`state`
2.  在`TextField`中做验证判断
3.  点击按钮时获取`FormState`，调用`validate()`方法。

由于代码过多，粘贴阅读体验不好，相关代码可参考：[dongxi346/Flutter-WanAndroid][dongxi346_Flutter-WanAndroid]

#### 输入框内容重置 ####

*  通过`FormState`去调用

var _formState = _formKey.currentState as FormState;
     // Form 里面的所有TextField输入框内容都被清空
     _formState.reset();

由于代码过多，粘贴阅读体验不好，相关代码可参考：[dongxi346/Flutter-WanAndroid][dongxi346_Flutter-WanAndroid]

#### 输入内容保存 ####

*  在`TextField`中使用 `onSave`字段

例如：

onSaved: (value){
      _passWord = value;
    },

*  通过`FormState`去调用

var _formState = _formKey.currentState as FormState;
     // Form 里面的所有TextField onSave 方法都被调用
     _formState.save();

由于代码过多，粘贴阅读体验不好，相关代码可参考：[dongxi346/Flutter-WanAndroid][dongxi346_Flutter-WanAndroid]

### 登录页面例子 ###

原来的效果图来源忘记了，好像是在一个第三方库中出现的效果，当时觉得`UI`超级好看就直接复制了作者的源码在 [现有的项目 Flutter-WanAndroid-login-page][Flutter-WanAndroid-login-page] 中使用 ，如有侵权联系。

通过前面几篇文章以及本篇文章的分析，实现这个登录效果图应该是相当容易了。  
这里暂不实现，待后面学习了布局的摆放后再来实现这个例子。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 12]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]: /images/20230528/a3f54b56090f4059b914146a1a5233d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]: /images/20230528/232392d965564884a1b2a4c297f165c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 2]: /images/20230528/1476e0cc78aa47e18fe76681e218a4e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 3]: /images/20230528/8c4967c434a9468bb5fb6f307efcd2df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 4]: /images/20230528/53d27c9072a94ad6868935c1ae1758ea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 5]: /images/20230528/163984b608d24f519051a393da2abf29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 6]: /images/20230528/c28eb0ed1ed54f9fb611f4080cf62fba.png
[Flutter_TextField_InputDecoration_textInputAction_inputFormatters]: https://blog.csdn.net/yuzhiqiang_1993/article/details/88204031
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 7]: /images/20230528/5dd51d79b27b45dbb214111ac521def6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 8]: /images/20230528/07dcb31a258a485db1f412af5d060c84.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 9]: /images/20230528/efa1ba10a7324a5da8ac2f8bb4844ca5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 10]: /images/20230528/cd7e3160a7014d6783ba254a392ade26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 11]: /images/20230528/545e9f2031ac465db5d523c1a14db9f7.png
[20200318145824329.gif]: /images/20230528/e9ee82aa235c46c5ae29ee15ffd74774.png
[dongxi346_Flutter-WanAndroid]: https://github.com/dongxi346/Flutter-WanAndroid/blob/master/lib/views/login_page/login_page.dart
[Flutter-WanAndroid-login-page]: https://github.com/dongxi346/Flutter-WanAndroid
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 12]: /images/20230528/679c50517bb9494f9284bb92509c44a2.png