Flutter快速上手1.3：基础控件之TextField

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