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 输入文本发生变化时回调
onEditingComplete VoidCallback 点击键盘完成按钮时触发的回调,无参数
onSubmitted ValueChanged 点击完成按钮时触发的回调,该回调有参数,参数即为输入的值
inputFormatters List 对输入文本的校验
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();

TextEditingController带初始值

TextEditingController.fromValue(TextEditingValue(text: '手机号'));

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

你可能感兴趣的:(Flutter快速上手1.3:基础控件之TextField)