Flutter 如何封装文本输入框组件
作者:岛上码农 发布时间:2023-09-27 02:54:51
目录
UI组件封装的考虑要点
文本输入框接口定义
代码实现
组件使用
踩坑记录
总结
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 组件不应该涉及到业务,再就是尽可能地简便(比如有一些默认值,减少必传参数)。当然,如果公司在一开始就能够由产品、设计和开发一起定一套组件,提前封装将会使得后面的开发效率更高,但这取决于项目时间的紧急程度,时间充裕的话可以这么考虑。
来源:https://juejin.cn/post/6969562507107106830
猜你喜欢
- 本博文参考自https://www.jb51.net/article/100269.htmwww.jb51.net/article/1002
- 程序的最主要的功能在于对数据进行操作,通过对数据进行操作来实现某个功能。而数据库就是很重要的一个方面的,Android中内置了小巧轻便,功能
- 先看Demo运行效果SharedPreferences详解SharedPreferences是Android平台上一个轻量级的存储类,用来保
- unity贪吃蛇基本原理实现,供大家参考,具体内容如下原理:1、每个身体跟着前面的身体移动;2、蛇头自动一直向前走,可以向左或者向右转弯。思
- 简述:JRebel是一款JVM插件,它使得Java代码修改后不用重启系统,立即生效。IDEA上原生是不支持热部署的,一般更新了 Java 文
- SpringBoot中的过滤器 * 操作与springmvc中的几乎一样所以这里也不过多介绍了,下面举两
- spring Boot 使用事务非常简单,首先使用注解 @EnableTransactionManagement 开启事务支持后,然后在访问
- 简介本文用示例介绍使用MyBatis-Plus进行多表查询的方法,包括静态查询和动态查询。代码controllerpackage com.e
- JSONArray删除元素的两种方式我自个磨出来的,难受JSONArray jsonarray = new JSONArray();Set&
- 前言背景平时开发中遇到根据当前用户的角色,只能查看数据权限范围的数据需求。列表实现方案有两种,一是在开发初期就做好判断赛选,但如果这个需求是
- 比较适合新手。逻辑上仍然有点问题。可以用于学习java文件操作下载地址:http://yun.baidu.com/share/link?sh
- 本文实例为大家分享了java文件处理工具类的具体代码,供大家参考,具体内容如下import java.io.BufferedInputStr
- 其实没什么技术含量,因为老是想不起来,所以在此文做下记录。通常我们的应用系统中都会有很多短信的发送,或者是信息邮件等的推送,而这些信息却有着
- activity A和BA 获取数据的activity B返回数据的activity点击A上的按钮,在A的textview上显示
- 需求当游戏显示3d场景及其UI的时候。玩家左右晃动手机的时候,UI界面会随之左右偏移。上下晃动的时候,3D场景会随之上下偏移。手机停止晃动的
- springboot读取配置文件到静态工具类通常我们读取配置文件可以用@Value注解和@Configuration,@Configurat
- 样式如下所示:布局:layoutdialog_set_pwd.xml<?xml version="." encod
- 一、背景1.1、前言当我们写好代码并测试功能符合要求时,有可能每天都要执行这个程序(比如我写了一个爬虫脚本,每天定时运行获取我想看的小说更新
- 前言:线程池是一个非常重要的知识点,也是池化技术的一个典型应用,相信很多人都有使用线程池的经历,但是对于线程池的实现原理大家都了解吗?本篇文
- 一、我们可以使用Spring Initializr来创建SpringBoot项目。Spring Initializr从本质上来说就是一个We