Flutter 如何封装文本输入框组件
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, 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 封装文本输入框的资料请关注猪先飞其它相关文章!
相关文章
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 今天我们来给大家介绍下在Vue开发中我们经常会碰到的一种需求场景,本文主要介绍了Vue动态查询规则生成组件,需要的朋友们下面随着小编来一起学习学习吧...2021-05-27
- 这篇文章主要介绍了vue中如何使用element的日历组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-30
- 在本篇内容里小编给大家分享的是关于c#使用封装方法以及相关知识点,对此有需要的朋友们可以学习下。...2020-06-25
- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
- 这篇文章主要介绍了Vue多选列表组件深入详解,这个是vue的基本组件,有需要的同学可以研究下...2021-03-03
- 在网页中,经常见到进度条效果,那么这些个性的进度条组件效果是怎么实现的呢,下面脚本之家小编给大家分享Bootstrap进度条组件知识详解,感兴趣的朋友要求学习吧...2016-05-04
- 这篇文章主要介绍了vue+element-ui表格封装tag标签使用插槽,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-19
- 有时候我们需要在登陆表单有一些提示语言,比如“请输入用户名”和“请输入密码”等语言,通过本文给大家介绍JavaScript实现输入框(密码框)出现提示语的相关知识,对js实现输入框提示相关知识感兴趣的朋友一起学习吧...2016-01-14
- 这篇文章主要为大家详细介绍了vue递归实现自定义tree组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-08-20
- 这篇文章主要介绍了Vue父子组件传值的一些坑,帮助大家更好的理解和使用vue父子组件,感兴趣的朋友可以了解下...2020-09-16
- 这篇文章主要为大家详细介绍了原生JS封装Ajax插件,为大家介绍不同域之间互相请求资源的跨域...2016-05-05
- 这篇文章主要介绍了封装 axios+promise通用请求函数操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-12
- Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架,主要基于 HTML、CSS、JAVASCRIPT 的。接下来通过本文给大家介绍BootStrap 附加导航组件的知识,感兴趣的朋友一起学习吧...2016-07-29
- 这篇文章主要为大家详细介绍了C#控制台程序使用Log4net日志组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
使用Angular CDK实现一个Service弹出Toast组件功能
本文主要写用cdk实现一个简单的Toast组件,使用的是cdk中的overlay模块,需要手动安装环境,具体安装方法及相关实现代码跟随小编一起看看吧...2021-07-28- 这篇文章主要为大家详细介绍了Bootstarp创建可折叠组件的对应方法,以实例为大家分享了Bootstrap折叠组件,感兴趣的小伙伴们可以参考一下...2016-02-26
- 高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React 高阶组件HOC使用小结,一起看看吧...2021-06-13