Flutter TextField 详细介绍

Flutter Textfield可以实现的效果

image.png

基本属性

TextField

 const TextField({
    Key key,
    this.controller,//控制器
    this.focusNode,//焦点
    this.obscureText = false,//是否隐藏文本,即显示密码类型
    this.maxLines = 1,//最多行数,高度与行数同步
    this.autofocus = false,//自动聚焦
    this.decoration = const InputDecoration(),//装饰
    TextInputType keyboardType,//键盘类型,即输入类型
    this.onChanged,//输入改变回调

    //以下属性不常用,用到再来查看
    this.textInputAction,//键盘按钮
    this.textCapitalization = TextCapitalization.none,//大小写
    this.style,//样式
    this.strutStyle,
    this.textAlign = TextAlign.start,//对齐方式
    this.textDirection,
    this.autocorrect = true,//自动更正
    this.minLines,//最小行数
    this.expands = false,
    this.maxLength,//最多输入数,有值后右下角就会有一个计数器
    this.maxLengthEnforced = true,
    this.onEditingComplete,//输入完成时,配合TextInputAction.done使用
    this.onSubmitted,//提交时,配合TextInputAction
    this.inputFormatters,//输入校验
    this.enabled,//是否可用
    this.cursorWidth = 2.0,//光标宽度
    this.cursorRadius,//光标圆角
    this.cursorColor,//光标颜色
    this.keyboardAppearance,
    this.scrollPadding = const EdgeInsets.all(20.0),
    this.dragStartBehavior = DragStartBehavior.start,
    this.enableInteractiveSelection,
    this.onTap,//点击事件
    this.buildCounter,
    this.scrollPhysics,
  }) 

属性有很多但是很多都不常用,不用死记,记几个常用即可

decoration(装饰器) 接收一个InputDecoration类型的值,主要用于控制TextField的外观以及提示信息等 这里介绍下这个重要的Widget,

InputDecoration

InputDecoration({
    this.icon,    //位于装饰器外部和输入框前面的图片
    this.labelText,  //用于描述输入框,例如这个输入框是用来输入用户名还是密码的,当输入框获取焦点时默认会浮动到上方,
    this.labelStyle,  // 控制labelText的样式,接收一个TextStyle类型的值
    this.helperText, //辅助文本,位于输入框下方,如果errorText不为空的话,则helperText不会显示
    this.helperStyle, //helperText的样式
    this.hintText,  //提示文本,位于输入框内部
    this.hintStyle, //hintText的样式
    this.hintMaxLines, //提示信息最大行数
    this.errorText,  //错误信息提示
    this.errorStyle, //errorText的样式
    this.errorMaxLines,   //errorText最大行数
    this.hasFloatingPlaceholder = true,  //labelText是否浮动,默认为true,修改为false则labelText在输入框获取焦点时不会浮动且不显示
    this.isDense,   //改变输入框是否为密集型,默认为false,修改为true时,图标及间距会变小
    this.contentPadding, //内间距
    this.prefixIcon,  //位于输入框内部起始位置的图标。
    this.prefix,   //预先填充的Widget,跟prefixText同时只能出现一个
    this.prefixText,  //预填充的文本,例如手机号前面预先加上区号等
    this.prefixStyle,  //prefixText的样式
    this.suffixIcon, //位于输入框后面的图片,例如一般输入框后面会有个眼睛,控制输入内容是否明文
    this.suffix,  //位于输入框尾部的控件,同样的不能和suffixText同时使用
    this.suffixText,//位于尾部的填充文字
    this.suffixStyle,  //suffixText的样式
    this.counter,//位于输入框右下方的小控件,不能和counterText同时使用
    this.counterText,//位于右下方显示的文本,常用于显示输入的字符数量
    this.counterStyle, //counterText的样式
    this.filled,  //如果为true,则输入使用fillColor指定的颜色填充
    this.fillColor,  //相当于输入框的背景颜色
    this.errorBorder,   //errorText不为空,输入框没有焦点时要显示的边框
    this.focusedBorder,  //输入框有焦点时的边框,如果errorText不为空的话,该属性无效
    this.focusedErrorBorder,  //errorText不为空时,输入框有焦点时的边框
    this.disabledBorder,  //输入框禁用时显示的边框,如果errorText不为空的话,该属性无效
    this.enabledBorder,  //输入框可用时显示的边框,如果errorText不为空的话,该属性无效
    this.border, //正常情况下的border
    this.enabled = true,  //输入框是否可用
    this.semanticCounterText,  
    this.alignLabelWithHint,
  })

属性也是很多下面举几个常用的例子

样式

基础样式

TextField(),

很简单,无任何参数,当然效果也很简单。(默认是带下划线的)

image.png

隐藏文本(变成密码框)

修改obscureText属性值

              TextField(
                obscureText: true,
              ),
image.png

键盘类型

键盘类型 即 可输入的类型,比如number就只能输入数字

             TextField(
                keyboardType: TextInputType.number, // TextInputType还有很多别键盘可以根据自己需要的场景调用
              ),
image.png

最多行数

设置最多3行 (设置的行数会影响TextField高度)

           TextField(
                maxLines: 3,
              ),
image.png

InputDecoration 装饰器

这个InputDecoration可以控制textField的很多样式 如 图标,前后图标,前后文字,提示文本,帮助文本,错误文本 边框等等

  • placeholder 提示文字

            TextField(
                decoration: InputDecoration(
                  hintText: '请输入账号aaa',
                ),
              ),
image.png
  • 去除下划线(早就看他不舒服了)


  TextField(
                decoration: InputDecoration
                {
                     hintText: '请输入删除车辆的原因',
                      
                     border:InputBorder.none
              }
              ),
image.png
  • 边框

   TextField(
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                ),
              ),
image.png

无论是下面的装饰线,还是矩形边框装饰线,失焦后都是 灰色 ,对焦都是主题颜色的 这里你可能会问我怎么改变他边框的颜色呢OutlineInputBorder里的borderSide是无法改变的,这是flutter 的一个坑

  • 解决方案 包裹一层Theme Widget

  Theme(
      data: new ThemeData(primaryColor: Colors.red, hintColor: Colors.blue),
      child: TextField(
        decoration: InputDecoration(
            contentPadding: EdgeInsets.all(10.0),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(15.0),
//            borderSide: BorderSide(color: Colors.red, width: 3.0, style: BorderStyle.solid)//没什么卵效果
            )),
      ),
    );

这里还有个坑 ThemeData(primaryColor: Colors.red, hintColor: Colors.blue), 这个hintColor 默认颜色好像还是不起作用,这个问题不在怎么设置,知道的可以回复一下,3q

  • 圆角

     TextField(
                decoration: InputDecoration(
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(30)),
                  ),
                ),
              ),
image.png

图标

图标有3种

  • 左侧外的图标

      TextField(
                decoration: InputDecoration(
                  icon: Icon(Icons.person),
                ),
              ),
image.png
  • 左侧内图标

      TextField(
                decoration: InputDecoration(
                  prefixIcon: Icon(Icons.phone_android),
                ),
              ),

image.png
  • 右侧内图标

         TextField(
                decoration: InputDecoration(
                  suffixIcon: IconButton(
                    icon: Icon(Icons.close),
                    onPressed: () {
                      controller.clear();
                    },
                  ),
                ),
              ),
image.png

还有一些什么帮助文字,错误文字,悬浮文字,前后填充文字 这里就不一一介绍了,用到的情况较少

获取输入内容

有两种方式:

  • onChanged
    onChanged是输入内容改变时的回调,返回一个String类型的数值,可以用一个变量记一下
           TextField(
                onChanged: (text) {
                  print("输入改变时" + text);
                },
              ),
  • controller
    controller控制器,初始化:
 var controller = TextEditingController();
 controller.addListener(() {});
//配置给TextField
   TextField(
                controller: controller,
        ),
//获取输入的值
controller.text
//清除Textfield输入的值
controller.clear();

焦点问题

往往我们在事件中提交的时候,是需要关闭软键盘的

这里我们就用到了focusNode

初始化:

   FocusNode userFocusNode = FocusNode();
   TextField(
                focusNode: userFocusNode,
              ),


//然后在需要的地方调用:失去焦点
userFocusNode.unfocus();


点击APP别的地方(不是其他textField的时候需要收起键盘) FocusScope.of(context).requestFocus(); //获取焦点的意思,你获取了焦点,别人就失去了焦点

溢出问题

  • 软键盘弹出之后遮盖

  • 软键盘弹出之后高度溢出

解决方案:

用滑动组件包裹起来(SingleChildScrollView,ListView等),这样软键盘弹出的时候,输入框也会自动向上滑。

以上如有说的不正确的地方,犹豫刚接触不久,还望指出.


image.png

文章转自:
@yechaoa
https://blog.csdn.net/yechaoa/article/details/90906689

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。