Loading...
墨滴

岛上码农@公众号同名

2021/10/03  阅读:21  主题:默认主题

Flutter 封装文本输入框

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

UI组件封装的考虑要点

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

  1. 接口如何定义:即组件接收什么输入参数来控制组件的外观和行为;
  2. 与业务分离:UI 组件应当只负责界面,而不负责业务,具体的业务应当由业务层完成;
  3. 简单易用:因为是 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<StringMap<StringObject>> _formData = {
    'username': {
      'value''',
      'controller': TextEditingController(),
      'obsecure'false,
    },
    'password': {
      'value''',
      'controller': TextEditingController(),
      'obsecure'true,
    },
  };

其次是定义统一的文本框 onChangedonClear 方法,对应为 _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,
),
//...

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

踩坑记录

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

//...
//错误的方式
onTap:onClear,
//...

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

总结

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

关注岛上码农
关注岛上码农

岛上码农@公众号同名

2021/10/03  阅读:21  主题:默认主题

作者介绍

岛上码农@公众号同名