Flutter 中的表单
2024-09-05 05:06:09
点击空白 input 失去焦点, 在页面的Scaffold外层加
GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {FocusScope.of(context).requestFocus(FocusNode());},
child:
);
一、Flutter 常用表单介绍
Flutter 中常见的表单有 TextField 单行文本框,TextField 多行文本框、CheckBox、Radio、Switch CheckboxListTile、RadioListTile、SwitchListTile、Slide.
二、TextField 文本框组件
TextField 表单常见属性:
maxLines 设置此参数可以把文本框改为多行文本框
onChanged 文本框改变的时候触发的事件
decoration
hintText 类似 html 中的 placeholder
border 配置文本框边框 OutlineInputBorder 配合使用
labelText lable 的名称
labelStyle 配置 lable 的样式
obscureText 把文本框框改为密码框
controller controller 结合 TextEditingController()可以配置表单默认显示的内容
三、Checkbox、CheckboxListTile 多选框组件
Checkbox 常见属性:
value true 或者 false
onChanged 改变的时候触发的事件
activeColor 选中的颜色、背景颜色
checkColor 选中的颜色、Checkbox 里面对号的颜色
CheckboxListTile 常见属性:
valuetrue 或者 false
onChanged 改变的时候触发的事件
activeColor 选中的颜色、背景颜色
title 标题
subtitle 二级标题
secondary 配置图标或者图片
selected 选中的时候文字颜色是否跟着改变
四、Radio、RadioListTile 单选按钮组件
Radio 常用属性:
value 单选的值
onChanged 改变时触发
activeColor 选中的颜色、背景颜色
groupValue 选择组的值
RadioListTile 常用属性:
RadioListTile 常用属性
value true 或者 false
onChanged 改变的时候触发的事件
activeColor 选中的颜色、背景颜色
title 标题
subtitle 二级标题
secondary 配置图标或者图片
groupValue 选择组的值
五、开关 Switch
value 单选的值
onChanged 改变时触发
activeColor 选中的颜色、背景颜色
表单验证 正则格式 RegExp(r'[\u4e00-\u9fa5]')
inputFormatters: [
WhitelistingTextInputFormatter(RegExp('[a-zA-Z]')), //只允许输入字母
WhitelistingTextInputFormatter.digitsOnly, // 只允许输入数字
WhitelistingTextInputFormatter(RegExp("[0-9.]")), //允许输入小数
LengthLimitingTextInputFormatter(5), // 限制字符串长度
WhitelistingTextInputFormatter(RegExp("[a-zA-Z]|[\u4e00-\u9fa5]|[0-9]")) //只能输入汉字或者字母或数字
],
案例代码
TextField(decoration: InputDecoration(hintText: '用户名'), controller: TextEditingController(text: defaultText)),
RaisedButton(child: Text('按钮'), onPressed: () {setState(() {defaultText = '666';});},),
SizedBox(height:5),
TextField(decoration: InputDecoration(hintText: '用户名', border: OutlineInputBorder()),),
SizedBox(height:5),
TextField(decoration: InputDecoration(border: OutlineInputBorder(), labelText: '用户名', labelStyle: TextStyle(color: Colors.red)), ),
SizedBox(height:5),
TextField(obscureText: true, decoration: InputDecoration(hintText: '输入密码', border: OutlineInputBorder()),),
SizedBox(height:5),
TextField(maxLines: 4, decoration: InputDecoration(hintText: '用户名', border: OutlineInputBorder()),),
// 多选框
Checkbox(value: checkFlag, onChanged: (val) { setState(() { checkFlag = val; });},),
Row(
children: <Widget>[
Checkbox(value: checkFlag, onChanged: (val) { setState(() { checkFlag = val; });},),
Text('123'),
],
),
CheckboxListTile(secondary: Icon(Icons.home), title: Text('123'), subtitle: Text('456'), value: checkFlag, onChanged: (val) { setState(() { checkFlag = val; });}), // Radio
Row(
children: <Widget>[
Text('男:'),
Radio(value: 1, onChanged: (val) { setState(() {radioFlag = val;});}, groupValue: radioFlag,),
Text('女:'),
Radio(value: 2, onChanged: (val) { setState(() {radioFlag = val;});}, groupValue: radioFlag,),
Text('保密:'),
Radio(value: 3, onChanged: (val) { setState(() {radioFlag = val;});}, groupValue: radioFlag,),
],
),
RadioListTile(value: 1, title: Text('123'), subtitle: Text('456'), secondary: Icon(Icons.home), groupValue: radioFlag, onChanged: (val) { setState(() {radioFlag = val;});}),
RadioListTile(value: 2, title: Text('123'), subtitle: Text('456'), secondary: Icon(Icons.home), groupValue: radioFlag, onChanged: (val) { setState(() {radioFlag = val;});}),
最新文章
- 一个百万数量级的mysql实例
- Java--笔记(5)
- 什么是jsonp
- Android反编译
- 架构(Architecture)和框架(Framework)杂谈
- Objective-C类成员变量深度剖析
- 使用git管理github上的项目
- Delphi thread exception mechanism
- 网站sqlserver提权操作
- 什么是TimeTunnel
- CSS之基础
- Java中利用BigInteger类进行大数开方
- kafka--producer 发布消息
- java gui 2
- 大数加法~HDU 1002 A + B Problem II
- js、jq获取屏幕宽高
- SQL Server 锁实验(重建索引)
- google浏览器高清壁纸保存
- 群晖NAS使用Docker安装迅雷离线下载出现the active key is not valid.
- iOS变量定义在 .h 还是 .m 中
热门文章
- 微信小程序判断input是否为空
- SQLserver 数据类型转换
- 三分钟快速上手TensorFlow 2.0 (后续)——扩展和附录
- 全面了解 Java 原子变量类
- Xshell5配置ssh免密码登录-公钥与私钥登录linux服务器(xshell如何登陆上阿里云服务器)
- openresty入门文章(笔者自用)
- 原来window 也可以使用pthreads
- [CF1236D] Alice and the Doll - 模拟,STL
- Linux system basic 2 + add kernel for Jupyter
- MIPS中的syscall用法