Flutter 封装文本输入框

作者：岛上码农

2022 年 3 月 19 日
本文字数：3392 字
阅读完需：约 11 分钟

上一篇的登录页面提到了文本框封装度不够，导致代码复用性不高的问题。在实际开发过程中，往往开始是完成功能层面的开发，然而再考虑组件封装和代码优化。当然，组件封装越早做越好，因为这样会提高整个团队开发的规范性和效率。

UI 组件封装的考虑要点

封装一个 UI 组件，通常需要考虑下面这三个点：

接口如何定义：即组件接收什么输入参数来控制组件的外观和行为；
与业务分离：UI 组件应当只负责界面，而不负责业务，具体的业务应当由业务层完成；
简单易用：因为是 UI 组件，要尽可能地简单易用，方便使用者快速上手。

文本输入框接口定义

首先先看一下我们上一篇使用文本框的代码，这里实际上只是调用了一个函数返回新的组件，之所以要这么做是因为用户名、密码使用了成员属性，需要根据不同的成员属性来设置不同的行为，主要有：

文本框装饰不同：包括占位符、前置图标，后置图标的行为绑定了成员属性以及不同的 TextEditingCongtroller。
onChanged 事件回调内容不同。
键盘类型和是否隐藏输入内容不同。
对应表单的字段不同。

Widget _getPasswordInput() {    return _getInputTextField(      TextInputType.text,      obscureText: true,      controller: _passwordController,      decoration: InputDecoration(        hintText: "输入密码",        icon: Icon(          Icons.lock_open,          size: 20.0,        ),        suffixIcon: GestureDetector(          child: Offstage(            child: Icon(Icons.clear),            offstage: _password == '',          ),          onTap: () {            this.setState(() {              _password = '';              _passwordController.clear();            });          },        ),        border: InputBorder.none,      ),      onChanged: (value) {        this.setState(() {          _password = value;        });      },    );  }

复制代码

而实际造成差别的原因是成员属性之间的差异不同，如果是继续使用成员属性这种方式，无法解决这个问题。这时候我们可以考虑把整个表单放入一个 Map 中，Map里配置不同字段对应的差异化属性，然后就可以做到通用的接口了，我们可以定义封装后的组件接口：

Widget _getInputTextFieldNew(    String formKey,    String value, {    TextInputType keyboardType = TextInputType.text,    FocusNode focusNode,    TextEditingController controller,    Function onChanged,    String hintText,    IconData prefixIcon,    Function onClear,    bool obscureText = false,    height = 50.0,    margin = 10.0,  }) {  //......}

复制代码

新增的参数如下：

formKey：表示文本框对应的是表单 Map 的哪个键；
value：当前表单的值，用于控制是否显示清除按钮
onClear：定义右侧清除按钮的行为响应
onChanged：输入内容变比回调

代码实现

抽离后的代码与业务页面无关，因此需要抽离代码，在 lib 目录下新增一个 components 目录，增加一个 form_util.dart 文件，用于存放通用的表单组件。实现的代码如下所示：

class FormUtil {  static Widget textField(    String formKey,    String value, {    TextInputType keyboardType = TextInputType.text,    FocusNode focusNode,    TextEditingController controller,    Function onChanged,    String hintText,    IconData prefixIcon,    Function onClear,    bool obscureText = false,    height = 50.0,    margin = 10.0,  }) {    return Container(      height: height,      margin: EdgeInsets.all(margin),      child: Column(        children: [          TextField(              keyboardType: keyboardType,              focusNode: focusNode,              obscureText: obscureText,              controller: controller,              decoration: InputDecoration(                hintText: hintText,                icon: Icon(                  prefixIcon,                  size: 20.0,                ),                border: InputBorder.none,                suffixIcon: GestureDetector(                  child: Offstage(                    child: Icon(Icons.clear),                    offstage: value == null || value == '',                  ),                  onTap: () {                    onClear(formKey);                  },                ),              ),              onChanged: (value) {                onChanged(formKey, value);              }),          Divider(            height: 1.0,            color: Colors.grey[400],          ),        ],      ),    );  }}

复制代码

组件使用

首先是使用 Map 定义当前页面的表单内容，以便控制不同表单字段的呈现形式。

Map<String, Map<String, Object>> _formData = {    'username': {      'value': '',      'controller': TextEditingController(),      'obsecure': false,    },    'password': {      'value': '',      'controller': TextEditingController(),      'obsecure': true,    },  };

复制代码

其次是定义统一的文本框 onChanged 和 onClear 方法，对应为 _handleTextFieldChanged和_handleClear。通过 formKey 回传的字段，可以更新对应 _formData 的内容。这里注意使用了as用法用于将一个 Object 转换为TextEditingController。这种转换如果 Object 对应的类型是TextEditingController的话能够成功转换，也能正常执行后面的 clear()方法。但是如果是 null，直接这时候执行 clear()方法，会报空指针异常。因此在转换结果后面加了个问号，这个表示是如果是 null 后面的方法不会执行，从而不会出现空指针异常。

_handleTextFieldChanged(String formKey, String value) {    this.setState(() {      _formData[formKey]['value'] = value;    });  }
  _handleClear(String formKey) {    this.setState(() {      _formData[formKey]['value'] = '';      (_formData[formKey]['controller'] as TextEditingController)?.clear();    });  }

复制代码

之后是在使用 textField 的地方使用 FormUtil.textField 方法直接使用封装好的文本框：

//...FormUtil.textField(    'username',    _formData['username']['value'],    controller: _formData['username']['controller'],    hintText: '请输入手机号',    prefixIcon: Icons.mobile_friendly,    onChanged: _handleTextFieldChanged,    onClear: _handleClear,  ),FormUtil.textField(    'password',    _formData['password']['value'],    controller: _formData['password']['controller'],    obscureText: true,    hintText: '请输入密码',    prefixIcon: Icons.lock_open,    onChanged: _handleTextFieldChanged,    onClear: _handleClear,),//...

复制代码

可以看到，username和 password 两个表单字段复用了_handleTextFieldChanged和_handleClear。整个代码量也减少了近 50%，而且封装的 FormUtil.textField 文本框也可以用于其他表单页面，整个代码的维护性和复用性都相比前一篇的有了很大的提高。

踩坑记录

在封装文本框的时候，直接将 onClear 函数复制给了GesureDetector 的 onTap 属性，结果每次输入都会触发onClear自动清空文本框内容。后来发现实际应该是传一个回调函数，下面列出了两种方式的不同：

//...//错误的方式onTap:onClear,//...
//...//正确的方式onTap:() {  onClear(formKey);},//...

复制代码

总结

封装 UI 组件在实际开发过程中非常常见，一般来说当我们看到设计稿的时候，首先是将设计稿拆分成多个组件，然后考虑一下其中的一些组件是不是在其他场合也会用到。如果有可能用到，就可以考虑封装。封装的时候先考虑对外接口参数，然后注意 UI 组件不应该涉及到业务，再就是尽可能地简便（比如有一些默认值，减少必传参数）。当然，如果公司在一开始就能够由产品、设计和开发一起定一套组件，提前封装将会使得后面的开发效率更高，但这取决于项目时间的紧急程度，时间充裕的话可以这么考虑。