文章目录
- 基本属性
- TextField
- InputDecoration
- 样式
- 基础样式
- 隐藏文本
- 键盘类型
- 键盘按钮
- 大小写
- 光标
- 最多行数
- 计数器
- 图标
- 提示文字
- 去除下划线
- 边框
- 获取输入内容
- 关闭软键盘
- 校验
- 异常
- 总结
- github:[/yechaoa/wanandroid_flutter](/yechaoa/wanandroid_flutter)
效果:
终于还是对
TextField
下手了,这个属性最多、功能点最多的Widget。
基本属性
TextField
是一个material design
风格的输入框,本身有多种属性,除此之外装饰器InputDecoration
也有多种属性,但都比较简单,所以不必担心,且听我娓娓道来。
先看一下源码,重要或常用的属性会有注释。
TextField
const TextField({
Key key,
,//控制器
,//焦点
= const InputDecoration(),//装饰
TextInputType keyboardType,//键盘类型,即输入类型
,//键盘按钮
= ,//大小写
,//样式
,
= ,//对齐方式
,
= false,//自动聚焦
= false,//是否隐藏文本,即显示密码类型
= true,//自动更正
= 1,//最多行数,高度与行数同步
,//最小行数
= false,
,//最多输入数,有值后右下角就会有一个计数器
= true,
,//输入改变回调
,//输入完成时,配合使用
,//提交时,配合TextInputAction
,//输入校验
,//是否可用
= 2.0,//光标宽度
,//光标圆角
,//光标颜色
,
= const (20.0),
= ,
,
,//点击事件
,
,
})
参数很多,其实日常开发中连一半的属性都用不到,但还是会尽量多的介绍。
InputDecoration
const InputDecoration({
,//左侧外的图标
,//悬浮提示,可代替hintText
,//悬浮提示文字的样式
,//帮助文字
,
,//输入提示
,
,
,//错误提示
,
,
= true,//是否显示悬浮提示文字
,
,//内填充
,//左侧内的图标
,
,//左侧内的文字
,
,//右侧内图标
,
,
,
,//自定义计数器
,//计数文字
,//计数样式
,//是否填充
,//填充颜色
,
,
,
,
,
,//边框
= true,
,
,
})
参数很多,多为一个小功能点的图标、文字和样式,并不复杂。
ok,基本属性大概过一遍,脑子里有个印象就行了。下面开始实操。
样式
基础样式
TextField(),
很简单,无任何参数,当然效果也很简单。
style可以修改样式。
隐藏文本
修改obscureText
属性值
TextField(
obscureText: true,
),
可以看到输入的内容已经不可见了,变成常见的密码类型了。
键盘类型
键盘类型 即 可输入的类型,比如number
就只能输入数字
TextField(
keyboardType: ,
),
TextInputType
可选类型:
- text
- multiline
- number
- phone
- datetime
- emailAddress
- url
键盘按钮
即键盘右下角的按钮,常见的比如完成,右下角是一个完成的对号按钮,上图即是。
TextField(
textInputAction: ,
),
TextInputAction
其他选项:
- none
- unspecified
- done
- go
- search
- send
- next
- previous
- continueAction
- join
- route
- emergencyCall
- newline
大小写
即控制输入的英文字母大小写,比如单词首字母大写
TextField(
textCapitalization: ,
),
TextCapitalization
的其他选项:
- words:单词首字母大写
- sentences:句子的首字母大写
- characters:所有字母大写
- none:默认无
光标
默认是一个蓝色的竖线
TextField(
cursorColor: ,
cursorWidth: 15,
cursorRadius: (15),
),
最多行数
设置最多3行
TextField(
maxLines: 3,
),
从效果可以看出,TextField高度已经变成了3行。但是我只是想最多输入3行,默认还是1行的高度怎么办呢?
不用慌,加一个参数就行了: minLines
TextField(
maxLines: 3,
minLines: 1,
),
可以看到,TextField的高度是会自适应的。
计数器
即右下角会有一个计数
TextField(
maxLength: 8,
),
默认:当前输入长度/最大长度,那这个地方我们能不能改呢,当然可以,下面简单操作一下
TextField(
maxLength: 8,
decoration: InputDecoration(
counter: Text("自定义计数 0/100"),
),
),
这里我用到了装饰InputDecoration
下的counter
,类型是widget
,那扩展度就相当高了,我只用了一个Text
,别的widget也是可以的。
如果只是纯文字的话,InputDecoration下还有一个counterText
属性和counterStyle
。
图标
图标有3种:
- 左侧外的图标
TextField(
decoration: InputDecoration(
icon: Icon(),
),
),
- 左侧内图标
TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.phone_android),
),
),
- 右侧内图标
TextField(
decoration: InputDecoration(
suffixIcon: IconButton(
icon: Icon(),
onPressed: () {
();
},
),
),
),
在右侧图标加了一个IconButton
,因为带有点击事件,我们可以在点击的时候清除TextField中的内容。
以上就是图标的介绍,其实除了图标之外,对应的位置也可以显示文字或者自定义显示其他widget
比如出了prefixIcon
之外还有其他3个属性,用法跟上面介绍到的自定义计数器是一样的。
,
,
,
提示文字
提示文字有4种:
- 输入提示文字
TextField(
controller: controller,
decoration: InputDecoration(
hintText: '请输入账号aaa',
),
),
- 悬浮提示文字
TextField(
controller: controller,
decoration: InputDecoration(
hintText: '请输入账号aaa',
labelText: '请输入账号',
),
),
可以看到,默认显示labelText
,聚焦之后才显示hintText
,所以labelText是可以取代hintText的。
- 帮助提示文字
TextField(
controller: controller,
decoration: InputDecoration(
helperText: "帮助文字",
helperStyle: TextStyle(color: )
),
),
一直显示在左下方
- 错误提示文字
TextField(
controller: controller,
decoration: InputDecoration(
errorText: "你没有输入任何内容",
),
),
去除下划线
TextField(
decoration: (hintText: "无下划线的输入框"),
),
也可以decoration: null
, 差别就是没有hintText了
边框
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
),
),
如果这个圆角不喜欢的话,也可以改一下的,比如:
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: ((30)),
),
),
),
获取输入内容
有两种方式:
- onChanged
onChanged
是输入内容改变时的回调,返回一个String
类型的数值,可以用一个变量记一下
TextField(
onChanged: (text) {
print("输入改变时" + text);
},
),
- controller
即控制器,初始化:
var controller;
@override
void initState() {
();
controller = TextEditingController();
(() {});
}
配置给TextField
TextField(
controller: controller,
),
获取内容
在事件中调用即返回输入内容。
关闭软键盘
往往我们在事件中提交的时候,是需要关闭软键盘的
这里我们就用到了focusNode
初始化:
FocusNode userFocusNode = FocusNode();
配置:
TextField(
focusNode: userFocusNode,
),
然后在需要的地方调用:
();
校验
校验的话其实有个inputFormatters
属性
final List<TextInputFormatter> inputFormatters;
继续看TextInputFormatter源码,有3个子类:
- BlacklistingTextInputFormatter
- WhitelistingTextInputFormatter
- LengthLimitingTextInputFormatter
黑名单、白名单和长度限制,我们随便找一个看一下源码是怎么实现校验的:
往下看会看到这么一段代码:
static final BlacklistingTextInputFormatter singleLineFormatter
= BlacklistingTextInputFormatter(RegExp(r'\n'));
关键词在RegExp
,其实就是我们一般用的正则表达式而已。
这样的话,我们也可以自定义校验规则了,比如校验手机号:
String validateMobile(String value) {
String patttern = r'(^[0-9]*$)';
RegExp regExp = new RegExp(patttern);
if ( == 0) {
return "手机号为空";
} else if (!(value)) {
return "手机号格式不正确";
}
return null;
}
以上只是我们一般的校验,表单的话还是建议使用
From
包裹TextFormField
异常
- 软键盘弹出之后遮盖
- 软键盘弹出之后高度溢出
解决办法:用滑动组件包裹起来(ListView等),这样软键盘弹出的时候,输入框也会自动向上滑。
总结
以上就是全部介绍了,然后写了个登录注册的小demo:
github:/yechaoa/wanandroid_flutter
官方文档:/flutter/material/
写作不易,有用就随手点个赞或star呗