Flutter快速上手1.3:基础控件之TextField
2022-04-20 本文已影响0人
十二栗子
TextField的属性
属性名 | 类型 | 简介 |
---|---|---|
controller | TextEditingController | 输入框的控制器,通常用于获取输入的内容 |
focusNode | FocusNode | 用于输入框的焦点管理和监听 |
decoration | InputDecoration | 输入框的装饰器,用于修改外观 |
keyboardType | TextInputType | 设置输入类型,不同的输入类型键盘会不一样 |
textInputAction | TextInputAction | 用于设置键盘动作(一般位于右下角,默认是完成) |
textCapitalization | TextCapitalization | 配置平台键盘如何选择大写或小写键盘。 |
style | TextStyle | 文本样式 |
textAlign | TextAlign | 文本位置 |
textDirection | TextDirection | 文本显示方向 |
autofocus | bool | 是否自动获取焦点 |
obscureText | bool | 是否隐藏输入的文字,通常用于密码框 |
autocorrect | bool | 是否自动校验 |
maxLines | int | 最大行数 |
maxLength | int | 输入的最大字符数 |
maxLengthEnforced | bool | 配合maxLength使用,达到最大长度时是否阻止输入 |
onChanged | ValueChanged<String> | 输入文本发生变化时回调 |
onEditingComplete | VoidCallback | 点击键盘完成按钮时触发的回调,无参数 |
onSubmitted | ValueChanged<String> | 点击完成按钮时触发的回调,该回调有参数,参数即为输入的值 |
inputFormatters | List<TextInputFormatter> | 对输入文本的校验 |
cursorWidth | double | 光标的宽度 |
cursorRadius | Radius | 光标的圆角 |
cursorColor | Color | 光标的颜色 |
keyboardAppearance | Brightness | 键盘的外观,仅在iOS设备上支持 |
onTap | GestureTapCallback | 点击输入框时的回调 |
enabled | bool | 输入框是否可用 |
readOnly | bool | 是否只读 |
装饰器 InputDecoration
属性名 | 类型 | 简介 |
---|---|---|
icon | Widget | 设置位于输入框前的图标 |
labelText | String | 设置描述输入框的标签 |
labelStyle | TextStyle | 设置labelText的样式 |
helperText | String | 帮助文本,位于输入框下方,如果errorText为空则不会显示 |
helperStyle | TextStyle | 设置helperText的样式 |
hintText | String | 提示文本,位于输入框内部 |
hintStyle | TextStyle | hintText的样式 |
hintMaxLines | int | 提示文本最大行数 |
errorText | String | 错误文本信息提示 |
errorStyle | TextStyle | errorText的样式 |
hasFloatingPlaceholder | bool | labelText是否浮动,默认为true |
isDense | bool | 输入框是否为密集型,默认为false,为true时,图标及间距会变小 |
contentPadding | EdgeInsetsGeometry | 内间距 |
isCollapsed | bool | 是否装饰的大小与输入字段的大小相同。 |
prefixIcon | Widget | 位于输入框内部起始位置的图标 |
prefix | Widget | 预先填充的Widget,跟prefixText只能同时出现一个 |
prefixText | String | 预填充的文本,例如手机号前面预先加上区号等 |
prefixStyle | TextStyle | prefixText的样式 |
suffixIcon | Widget | 位于输入框尾部的图标 |
suffix | Widget | 位于输入框尾部的控件 |
suffixText | String | 位于尾部的填充文字 |
suffixStyle | TextStyle | suffixText的样式 |
counter | Widget | 输入框右下方的计数小控件,不能和counterText同时使用 |
counterText | String | 右下方显示的文本,常用于显示输入的字符数量 |
counterStyle | TextStyle | counterText的样式 |
filled | bool | 如果为true,则使用fillColor指定的颜色填充 |
fillColor | Color | 输入框的背景颜色 |
errorBorder | InputBorder | errorText不为空,且输入框没有焦点时要显示的边框 |
focusedBorder | InputBorder | 输入框有焦点时的边框,errorText必须为空 |
focusedErrorBorder | InputBorder | errorText不为空时,输入框有焦点时的边框 |
disabledBorder | InputBorder | 输入框禁用时显示的边框,errorText必须为空 |
enabledBorder | InputBorder | 输入框可用时显示的边框,errorText必须为空 |
border | InputBorder | 正常情况下的边框 |
enabled | bool | 输入框是否可用 |
border的三种值
- InputBorder.none 没有边框
- OutlineInputBorder 线框
- UnderlineInputBorder 底边线,默认的
小技巧
当输入框的默认线框无法满足时,可以使用Container容器自定义边框。这时候可以将装饰器设置为InputDecoration.collapsed(hintText: 'hint')表示禁用装饰线
以登录为例👇🏻👇🏻👇🏻
1.定义的变量
final phoneTf = TextEditingController();
final pwdTf = TextEditingController();
bool showPhoneClear = false;
bool showPwdClear = false;
final FocusNode phoneFocusNode = FocusNode();
final FocusNode pwdFocusNode = FocusNode();
2.输入手机号
Container(
margin: const EdgeInsets.symmetric(horizontal: 15),
child: TextField(
//关联焦点变量,处理输入框失去焦点
focusNode: phoneFocusNode,
//关联输入框变量
controller: phoneTf,
//键盘类型
keyboardType: TextInputType.number,
//输入校验
inputFormatters: [
//设置只允许输入数字
FilteringTextInputFormatter.allow(RegExp(r'[0-9]')),
],
//最大字符数
maxLength: 11,
//输入框获取焦点的时候
onTap: () {
setState(() {
showPhoneClear = true;
showPwdClear = false;
});
},
//编辑完成,点击键盘的完成按钮,
onEditingComplete: () {
print('onEditingComplete');
//手机号输入框失去焦点
phoneFocusNode.unfocus();
setState(() {
showPhoneClear = false;
});
},
//装饰器
decoration: InputDecoration(
//手机号图标
prefixIcon: const Icon(Icons.phone_android,size: 25, color: Colors.pinkAccent,),
//提示文字
hintText: '请输入手机号',
//边框
border: const OutlineInputBorder(
//圆角
borderRadius: BorderRadius.all(Radius.circular(15)),
),
//后面清除按钮和事件
suffixIcon: Visibility(
visible: showPhoneClear,
child: GestureDetector(
onTap: () {
phoneTf.clear();
print('jj');
},
//清除按钮
child: const Icon(Icons.clear),
),
),
),
),
),
3.输入密码
Container(
margin: const EdgeInsets.symmetric(horizontal: 15),
child: TextField(
focusNode: pwdFocusNode,
controller: pwdTf,
maxLength: 32,
obscureText: true,
//这个键盘兼容密码密码输入字符
keyboardType: TextInputType.emailAddress,
onTap: () {
setState(() {
showPhoneClear = false;
showPwdClear = true;
});
},
onEditingComplete: () {
pwdFocusNode.unfocus();
setState(() {
showPwdClear = false;
});
},
decoration: InputDecoration(
prefixIcon: const Icon(Icons.lock,size: 25, color: Colors.pinkAccent),
hintText: '请输入密码',
suffixIcon: Visibility(
visible: showPwdClear,
child: GestureDetector(
onTap: () {
pwdTf.clear();
print('jj');
},
child: const Icon(Icons.clear),
),
),
),
),
),
WX20220419-140214.png
本地Flutter 2.10.1,Mac版Android Studio Bumblebee | 2021.1.1 Patch 2
我是小栗子,初学Flutter ,文章会根据学习进度不定时更新,请多多指教~~