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 ，文章会根据学习进度不定时更新，请多多指教~~
网友评论