美文网首页Flutter
Flutter 之 TextField 控件

Flutter 之 TextField 控件

作者: Goach | 来源:发表于2019-08-17 21:58 被阅读0次

    属性

    1. controller

    类似 Android 的 TextWatcher 可以添加监听事件,如

     TextEditingController controller = new TextEditingController();
        controller.addListener((){
          print("addListener====${controller.text}");
        });
    

    2. focusNode

    主动调用获取焦点 requestFocus ,如

    Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new GestureDetector(
                  child: Text(
                    'Hello Flutter',
                  ),
                  onTap: (){
                    FocusScope.of(context).requestFocus(focusNode);//这里就是主动调用获取焦点
                  },
                ),
                TextField(
                  focusNode: focusNode,
                )
              ],
            ),
          ),
    

    3. decoration

    控制输入框显示的内容,如

    decoration: new InputDecoration(
                    icon: const Icon(Icons.search),
                    //labelText: '请输入姓名labelText',//输入框未聚焦的时候,只显示labelText,不显示HintText,聚焦labelText上移
                    labelStyle: TextStyle(
                      fontSize: 14
                    ),
                    helperText: '只能输入中文',
                    helperStyle: new TextStyle(
                        fontSize: 14
                    ),
                    hintText: '请输入姓名',
                    hintStyle: new TextStyle(
                      fontSize: 14
                    ),
                    hintMaxLines: 2,
                    errorText: '姓名输入错误',//errorText不为null的使用helperText不会显示
                    errorStyle: new TextStyle(
                      fontSize: 16
                    ),
                    errorMaxLines: 1,
                    errorBorder: new OutlineInputBorder(), //失去焦点时,error时下划线显示的边框样式,不设置则使用默认的的下划线
                    hasFloatingPlaceholder:true,//输入文本的时候是否显示labelText,默认true显示
                    isDense:true,//图标间距和行间距是否密集,默认false
                    contentPadding:EdgeInsets.all(20.0),//文字与输入框的间距,并且影响isDense
                    //prefixIcon:const Icon(Icons.search),//显示在输入框内的图标
                    prefix:Text('prefix'),//给输入框前面widget的形式,
                    //prefixText: 'prefixText',
                    suffix:Text('suffix'),//输入框后面
                    //suffixIcon:,//对应prefixIcon
                    //suffixText:,//对应prefixText
                    //counter:Text('输入框外右下角文字'),//输入框外右下角文字
                    counterText:'输入框外右下角文字',//与上面类似
                      //counterStyle:,//与上面类似
                    filled:false,//是否填充输入框背景颜色
                    fillColor:null,//输入框背景颜色
                    focusColor:Colors.deepOrange,//聚焦边框颜色
                    hoverColor:Colors.red,
                    disabledBorder:new OutlineInputBorder(),//不可输入的输入框的边框样式
                    enabledBorder:new OutlineInputBorder(),//可输入时的输入框的边框样式
                    border:new OutlineInputBorder(),//输入框的边线
                    enabled: true,//输入框是否可以输入
                    semanticCounterText:'',//和counterText匹配,替换语义标签,不知道怎么用
                    alignLabelWithHint:true,//hintText 多行的时候设置为true
                  ),
    

    显示效果为

    decoration.png

    4. keyboardType
    限制输入的文本类型

    • TextInputType.text 文本
    • TextInputType.datetime 调用起输入数字键盘,带 "." 和 "-" ,来输入日期和时间
    • TextInputType.emailAddress 邮箱
    • TextInputType.multiline 多行文本信息
    • TextInputType.number 数字
    • TextInputType.url url 类型
    • TextInputType.visiblePassword 密码
    • TextInputType.values 多种类型

    5. textInputAction
    控制键盘动作(默认是完成),有这些类型可以设置

    image.png

    6. textCapitalization
    弹出框的一些默认设置

    • TextCapitalization.words 默认为每个单词的第一个字母使用大写键盘
    • TextCapitalization.sentences 默认为每个句子的第一个字母使用大写键盘。
    • TextCapitalization.characters 每个字符默认使用大写键盘
    • TextCapitalization.none 默认小写键盘

    7. style

    输入文字的样式设置

    8. strutStyle

    输入框高度的样式

    strutStyle: StrutStyle(
                    fontSize: 22,
                    height: 1,
                    forceStrutHeight: true,
                  )
    

    9. textAlign

    输入文本对齐方式


    对齐.png

    10. textAlignVertical

    垂直方向对齐方式


    image.png

    11. textDirection

    • TextDirection.ltr 从左到右
    • TextDirection.rtl 从右到左

    12. readOnly

    true 只可读输入框

    13. toolbarOptions

    不知道怎么用

    14. showCursor

    是否显示光标

    15. autofocus

    是否自动聚焦

    16. obscureText

    输入内容是否不可见,比如输入密码那种。

    17. autocorrect
    是否自动更正

    18. maxLines

    最大行数

    19. minLines

    最少行数,需要和 maxLines 同时设置

    20. expands

    是否展开文本, true 的时候 maxLines 和 minLines 一定要是 null 。

    21. maxLength

    最大文字长度

    22. maxLengthEnforced

    是否要执行 maxLingth 设置的限制

    23. onChanged

    输入监听回调

    onChanged: (text){
                   print('onChange ==' + text);
                 },
    

    24. onEditingComplete

    输入完成点击键盘 textInputAction 配置 TextInputAction.done 的事件

    onEditingComplete: (){
                    print('onEditingComplete ==' );
                  }
    

    25. onSubmitted

    输入完成点击键盘 textInputAction 配置提交类的事件

    onSubmitted: (text){
                    print('onSubmitted ==' );
                  },
    

    26. inputFormatters

    输入的校验。

    • BlacklistingTextInputFormatter
    • WhitelistingTextInputFormatter
    • LengthLimitingTextInputFormatter
    inputFormatters: [
                   new WhitelistingTextInputFormatter(RegExp("[a-z]"))
                 ],
    

    27. enabled

    事件总开关

    28. cursorWidth = 2.0

    光标宽度

    29. cursorRadius

    光标圆角

    30. cursorColor

    光标颜色

    31. keyboardAppearance

    设置键盘的外观,IOS 上面才有用,

    32. scrollPadding

    滑动文本的间距,默认 = const EdgeInsets.all(20.0)

    33. dragStartBehavior

    拖动方式,默认 DragStartBehavior.start

    34. enableInteractiveSelection

    是否需要选中输入框的交互方式

    35. onTap

    输入框点击事件回调

    36. buildCounter

    和 InputCounterWidgetBuilder ,counterText,semanticCounterText 什么效果,

    37. scrollController

    滚动初始化偏移量

    ScrollController({
        double initialScrollOffset = 0.0,
        this.keepScrollOffset = true,
        this.debugLabel,
      })
    

    38. scrollPhysics

    相关文章

      网友评论

        本文标题:Flutter 之 TextField 控件

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