美文网首页
Flutter TextField

Flutter TextField

作者: 壹尘子 | 来源:发表于2019-09-20 16:57 被阅读0次

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
    本文链接:https://blog.csdn.net/yechaoa/article/details/90906689
    文章目录
    基本属性
    TextField
    InputDecoration
    样式
    基础样式
    隐藏文本
    键盘类型
    键盘按钮
    大小写
    光标
    最多行数
    计数器
    图标
    提示文字
    去除下划线
    边框
    获取输入内容
    关闭软键盘
    校验
    异常
    总结
    github:https://github.com/yechaoa/wanandroid_flutter/blob/master/lib/pages/loginPage.dart
    效果:

    终于还是对TextField下手了,这个属性最多、功能点最多的Widget。

    基本属性
    TextField是一个material design风格的输入框,本身有多种属性,除此之外装饰器InputDecoration也有多种属性,但都比较简单,所以不必担心,且听我娓娓道来。

    先看一下源码,重要或常用的属性会有注释。

    TextField
    const TextField({
    Key key,
    this.controller,//控制器
    this.focusNode,//焦点
    this.decoration = const InputDecoration(),//装饰
    TextInputType keyboardType,//键盘类型,即输入类型
    this.textInputAction,//键盘按钮
    this.textCapitalization = TextCapitalization.none,//大小写
    this.style,//样式
    this.strutStyle,
    this.textAlign = TextAlign.start,//对齐方式
    this.textDirection,
    this.autofocus = false,//自动聚焦
    this.obscureText = false,//是否隐藏文本,即显示密码类型
    this.autocorrect = true,//自动更正
    this.maxLines = 1,//最多行数,高度与行数同步
    this.minLines,//最小行数
    this.expands = false,
    this.maxLength,//最多输入数,有值后右下角就会有一个计数器
    this.maxLengthEnforced = true,
    this.onChanged,//输入改变回调
    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,
    })
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    参数很多,其实日常开发中连一半的属性都用不到,但还是会尽量多的介绍。

    InputDecoration
    const InputDecoration({
    this.icon,//左侧外的图标
    this.labelText,//悬浮提示,可代替hintText
    this.labelStyle,//悬浮提示文字的样式
    this.helperText,//帮助文字
    this.helperStyle,
    this.hintText,//输入提示
    this.hintStyle,
    this.hintMaxLines,
    this.errorText,//错误提示
    this.errorStyle,
    this.errorMaxLines,
    this.hasFloatingPlaceholder = true,//是否显示悬浮提示文字
    this.isDense,
    this.contentPadding,//内填充
    this.prefixIcon,//左侧内的图标
    this.prefix,
    this.prefixText,//左侧内的文字
    this.prefixStyle,
    this.suffixIcon,//右侧内图标
    this.suffix,
    this.suffixText,
    this.suffixStyle,
    this.counter,//自定义计数器
    this.counterText,//计数文字
    this.counterStyle,//计数样式
    this.filled,//是否填充
    this.fillColor,//填充颜色
    this.errorBorder,
    this.focusedBorder,
    this.focusedErrorBorder,
    this.disabledBorder,
    this.enabledBorder,
    this.border,//边框
    this.enabled = true,
    this.semanticCounterText,
    this.alignLabelWithHint,
    })
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    参数很多,多为一个小功能点的图标、文字和样式,并不复杂。

    ok,基本属性大概过一遍,脑子里有个印象就行了。下面开始实操。

    样式
    基础样式
    TextField(),
    1
    很简单,无任何参数,当然效果也很简单。

    style可以修改样式。

    隐藏文本
    修改obscureText属性值

              TextField(
                obscureText: true,
              ),
    

    1
    2
    3

    可以看到输入的内容已经不可见了,变成常见的密码类型了。

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

              TextField(
                keyboardType: TextInputType.number,
              ),
    

    1
    2
    3

    TextInputType可选类型:

    text
    multiline
    number
    phone
    datetime
    emailAddress
    url
    键盘按钮
    即键盘右下角的按钮,常见的比如完成,右下角是一个完成的对号按钮,上图即是。

              TextField(
                textInputAction: TextInputAction.done,
              ),
    

    1
    2
    3
    TextInputAction其他选项:

    none
    unspecified
    done
    go
    search
    send
    next
    previous
    continueAction
    join
    route
    emergencyCall
    newline
    大小写
    即控制输入的英文字母大小写,比如单词首字母大写

              TextField(
                textCapitalization: TextCapitalization.words,
              ),
    

    1
    2
    3

    TextCapitalization的其他选项:

    words:单词首字母大写
    sentences:句子的首字母大写
    characters:所有字母大写
    none:默认无
    光标
    默认是一个蓝色的竖线

              TextField(
                cursorColor: Colors.orange,
                cursorWidth: 15,
                cursorRadius: Radius.circular(15),
              ),
    

    1
    2
    3
    4
    5

    最多行数
    设置最多3行

              TextField(
                maxLines: 3,
              ),
    

    1
    2
    3

    从效果可以看出,TextField高度已经变成了3行。但是我只是想最多输入3行,默认还是1行的高度怎么办呢?
    不用慌,加一个参数就行了: minLines

              TextField(
                maxLines: 3,
                minLines: 1,
              ),
    

    1
    2
    3
    4

    可以看到,TextField的高度是会自适应的。

    计数器
    即右下角会有一个计数

              TextField(
                maxLength: 8,
              ),
    

    1
    2
    3

    默认:当前输入长度/最大长度,那这个地方我们能不能改呢,当然可以,下面简单操作一下

              TextField(
                maxLength: 8,
                decoration: InputDecoration(
                  counter: Text("自定义计数 0/100"),
                ),
              ),
    

    1
    2
    3
    4
    5
    6

    这里我用到了装饰InputDecoration下的counter,类型是widget,那扩展度就相当高了,我只用了一个Text,别的widget也是可以的。

    如果只是纯文字的话,InputDecoration下还有一个counterText属性和counterStyle。

    图标
    图标有3种:

    左侧外的图标
    TextField(
    decoration: InputDecoration(
    icon: Icon(Icons.person),
    ),
    ),
    1
    2
    3
    4
    5

    左侧内图标
    TextField(
    decoration: InputDecoration(
    prefixIcon: Icon(Icons.phone_android),
    ),
    ),
    1
    2
    3
    4
    5

    右侧内图标
    TextField(
    decoration: InputDecoration(
    suffixIcon: IconButton(
    icon: Icon(Icons.close),
    onPressed: () {
    controller.clear();
    },
    ),
    ),
    ),
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    在右侧图标加了一个IconButton,因为带有点击事件,我们可以在点击的时候清除TextField中的内容。

    以上就是图标的介绍,其实除了图标之外,对应的位置也可以显示文字或者自定义显示其他widget
    比如出了prefixIcon之外还有其他3个属性,用法跟上面介绍到的自定义计数器是一样的。

    this.prefix,
    this.prefixText,
    this.prefixStyle,
    

    1
    2
    3
    提示文字
    提示文字有4种:

    输入提示文字
    TextField(
    controller: controller,
    decoration: InputDecoration(
    hintText: '请输入账号aaa',
    ),
    ),
    1
    2
    3
    4
    5
    6

    悬浮提示文字
    TextField(
    controller: controller,
    decoration: InputDecoration(
    hintText: '请输入账号aaa',
    labelText: '请输入账号',
    ),
    ),
    1
    2
    3
    4
    5
    6
    7

    可以看到,默认显示labelText,聚焦之后才显示hintText,所以labelText是可以取代hintText的。

    帮助提示文字
    TextField(
    controller: controller,
    decoration: InputDecoration(
    helperText: "帮助文字",
    helperStyle: TextStyle(color: Colors.blue)
    ),
    ),
    1
    2
    3
    4
    5
    6
    7

    一直显示在左下方

    错误提示文字
    TextField(
    controller: controller,
    decoration: InputDecoration(
    errorText: "你没有输入任何内容",
    ),
    ),
    1
    2
    3
    4
    5
    6

    去除下划线
    TextField(
    decoration: InputDecoration.collapsed(hintText: "无下划线的输入框"),
    ),
    1
    2
    3

    也可以decoration: null, 差别就是没有hintText了

    边框
    TextField(
    decoration: InputDecoration(
    border: OutlineInputBorder(),
    ),
    ),
    1
    2
    3
    4
    5

    如果这个圆角不喜欢的话,也可以改一下的,比如:

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

    1
    2
    3
    4
    5
    6
    7

    获取输入内容
    有两种方式:

    onChanged
    onChanged是输入内容改变时的回调,返回一个String类型的数值,可以用一个变量记一下
    TextField(
    onChanged: (text) {
    print("输入改变时" + text);
    },
    ),
    1
    2
    3
    4
    5
    controller
    即控制器,初始化:
    var controller;

    @override
    void initState() {
    super.initState();
    controller = TextEditingController();
    controller.addListener(() {});
    }
    1
    2
    3
    4
    5
    6
    7
    8
    配置给TextField

              TextField(
                controller: controller,
              ),
    

    1
    2
    3
    获取内容

    controller.text
    1
    在事件中调用controller.text即返回输入内容。

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

    这里我们就用到了focusNode

    初始化:

    FocusNode userFocusNode = FocusNode();
    1
    配置:

              TextField(
                focusNode: userFocusNode,
              ),
    

    1
    2
    3
    然后在需要的地方调用:

    userFocusNode.unfocus();
    1
    校验
    校验的话其实有个inputFormatters属性

    final List<TextInputFormatter> inputFormatters;
    1
    继续看TextInputFormatter源码,有3个子类:

    BlacklistingTextInputFormatter
    WhitelistingTextInputFormatter
    LengthLimitingTextInputFormatter
    黑名单、白名单和长度限制,我们随便找一个看一下源码是怎么实现校验的:

    往下看会看到这么一段代码:

    static final BlacklistingTextInputFormatter singleLineFormatter
    = BlacklistingTextInputFormatter(RegExp(r'\n'));
    1
    2
    关键词在RegExp,其实就是我们一般用的正则表达式而已。

    这样的话,我们也可以自定义校验规则了,比如校验手机号:

    String validateMobile(String value) {
    String patttern = r'(^[0-9]*$)';
    RegExp regExp = new RegExp(patttern);
    if (value.length == 0) {
    return "手机号为空";
    } else if (!regExp.hasMatch(value)) {
    return "手机号格式不正确";
    }
    return null;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    以上只是我们一般的校验,表单的话还是建议使用From包裹TextFormField

    异常
    软键盘弹出之后遮盖
    软键盘弹出之后高度溢出
    解决办法:用滑动组件包裹起来(ListView等),这样软键盘弹出的时候,输入框也会自动向上滑。

    总结
    以上就是全部介绍了,然后写了个登录注册的小demo:

    github:https://github.com/yechaoa/wanandroid_flutter/blob/master/lib/pages/loginPage.dart
    官方文档:https://api.flutter.dev/flutter/material/TextField-class.html

    相关文章

      网友评论

          本文标题:Flutter TextField

          本文链接:https://www.haomeiwen.com/subject/vvpjuctx.html