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,
    controller: texteditingcontroller,
    onchanged: function,
    string hinttext,
    icondata prefixicon,
    onclear: function,
    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,
    controller: texteditingcontroller,
    onchanged: function,
    string hinttext,
    icondata prefixicon,
    onclear: function,
    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 后面的方法不会执行，从而不会出现空指针异常。这是 flutter 2.0引入的 null safety 特性。其实这个特效在 php 7，swift 语言早就有应用了。

_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 组件不应该涉及到业务，再就是尽可能地简便（比如有一些默认值，减少必传参数）。当然，如果公司在一开始就能够由产品、设计和开发一起定一套组件，提前封装将会使得后面的开发效率更高，但这取决于项目时间的紧急程度，时间充裕的话可以这么考虑。

以上就是flutter 如何封装文本输入框的详细内容，更多关于flutter 封装文本输入框的资料请关注其它相关文章！