Flutter（五）TextField

作者: 天色将变 | 来源:发表于2019-03-27 19:50 被阅读551次

TextField 输入框

属性如下：

TextField(
              controller: controller,
              //允许输入的最大长度，一个字母一个符号一个汉字都算1 且右下角有字数显示
              maxLength: 20,
              //超过最大长度后是否还允许继续输入
//              maxLengthEnforced: true,//默认true  超过长度后输入无效  右下角数字 显示10/10   此时onchange方法依然会调用，返回值就是限制了长度的值 超过后的输入不显示
              maxLengthEnforced: false, //超过后可继续输入  右下角数字显示，比如 23/10

              //不是允许输入的最大行数,指的是输入框内可显示的高度是几行，超过设定行数后，scroll滚动显示
              maxLines: 3,
              //是否自动更正
              autocorrect: true,
              // 该输入框的焦点处理，当获取/失去焦点时回调方法
              focusNode: _focusNode,
              //是否自动获取焦点  跳转到该页面后 光标自动显示到该输入框  键盘弹起
              autofocus: true,
              //是否是密码  非密码以明文显示，密码以点显示
              obscureText: false,

              //文本对齐方式  输入文字后，文字显示时是靠左靠右还是居中
              textAlign: TextAlign.right, // 靠右  textDirection的设置无效
//              textAlign: TextAlign.left,// 靠左   textDirection的设置无效
//              textAlign: TextAlign.center,// 居中
//              textAlign: TextAlign.start,// TextDirection.ltr时靠左，TextDirection.rtl时靠右
//              textAlign: TextAlign.end,// TextDirection.ltr时靠右，TextDirection.rtl时靠左
//              textAlign: TextAlign.justify,// 两端对齐

              // 从左边还是右边开始输入文字
              textDirection: TextDirection.ltr, //从左边输入  光标在左边
//              textDirection: TextDirection.rtl, //从右边输入  光标在右边

              //输入文本的样式  字体大小  颜色 等
              style: TextStyle(fontSize: 50.0, color: Colors.blue),

              //是否启用输入  如果是false 就无法输入了，且errorText失效
              enabled: true,
//              enabled: false,

              //白名单校验，只允许输入符合规则的文本
//              inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],//允许的输入格式,不是控制的键盘，只有符合格式的输入才会显示 digitsOnly表示只允许数字。
//              inputFormatters: [WhitelistingTextInputFormatter(RegExp("[a-z]"))],//只允许输入a-z小写字母。

              //允许输入的最大长度，一个字母一个符号一个汉字都算1 不会显示右下角的字数
              //如果设置了maxLength  那么长度限制以这里的限制为准，但是会显示右下角的字数
//              inputFormatters: [LengthLimitingTextInputFormatter(15)],

              //黑名单校验，只允许输入给定规则以外的文本
//            inputFormatters: [BlacklistingTextInputFormatter(RegExp("[a-z]"))],//不允许输入a-z小写字母
//            inputFormatters: [BlacklistingTextInputFormatter(RegExp("[a-z]"),replacementString: "-")],//不允许输入a-z小写字母  如果输入了 用“-”替代

              //弹出的键盘的类型
              keyboardType: TextInputType.text, // 文本
//              keyboardType: TextInputType.number,//数字  数字键盘  + 部分常用数学符合
//              keyboardType: TextInputType.phone,//手机号  数字键盘  + 部分手机号常用符合"*", and "#".
//              keyboardType: TextInputType.datetime,// 时间  数字键盘  + 部分时间常用符合":", and "-".
//              keyboardType: TextInputType.emailAddress,//邮件  英文键盘 + 邮件符合  "@" and "."
//              keyboardType: TextInputType.multiline,// 多行输入   控制enter键的功能为换行了
//              keyboardType: TextInputType.url,//url格式 英文键盘+url符合 "/" and "."

              //设置键盘上enter键的显示内容
              textInputAction: TextInputAction.search, //搜索
//              textInputAction: TextInputAction.none,//默认回车符号
//              textInputAction: TextInputAction.done,//安卓显示 回车符号
//              textInputAction: TextInputAction.go,//开始
//              textInputAction: TextInputAction.next,//下一步
//              textInputAction: TextInputAction.send,//发送
//              textInputAction: TextInputAction.continueAction,//android  不支持
//              textInputAction: TextInputAction.emergencyCall,//android  不支持
//              textInputAction: TextInputAction.newline,//安卓显示 回车符号
//              textInputAction: TextInputAction.route,//android  不支持
//              textInputAction: TextInputAction.join,//android  不支持
//              textInputAction: TextInputAction.previous,//安卓显示 回车符号
//              textInputAction: TextInputAction.unspecified,//安卓显示 回车符号

              // 控制键盘大小写切换的   试过了 但是好像没有效果？？
//              textCapitalization: TextCapitalization.characters,  // 输入时键盘的英文都是大写
//              textCapitalization: TextCapitalization.none,  //  键盘英文默认显示小写
//              textCapitalization: TextCapitalization.sentences, // 在输入每个句子的第一个字母时，键盘大写形式，输入后续字母时键盘小写形式
//              textCapitalization: TextCapitalization.words,// 在输入每个单词的第一个字母时，键盘大写形式，输入其他字母时键盘小写形式

              //光标颜色
              cursorColor: Colors.red,
              //光标圆角
              cursorRadius: Radius.circular(5),
              //光标宽度
              cursorWidth: 10,

              //输入框的边框样式
              decoration: InputDecoration(
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10.0),
                    borderSide: BorderSide(color: Colors.transparent)),
                //输入内容距离上下左右的距离 ，可通过这个属性来控制 TextField的高度
                contentPadding: EdgeInsets.all(10.0),
                fillColor: Colors.white, filled: true,
//            labelText: 'Hello',
                // 以下属性可用来去除TextField的边框
                disabledBorder: InputBorder.none,
                enabledBorder: InputBorder.none,
                focusedBorder: InputBorder.none,
              ),

              // 键盘外观  仅ios有效
//              keyboardAppearance: Brightness.light,
              keyboardAppearance: Brightness.dark,

              //？？？暂未发现什么用途
              scrollPadding: EdgeInsets.all(50),

              //？？？暂未发现什么用途
//              dragStartBehavior: DragStartBehavior.start,
              dragStartBehavior: DragStartBehavior.down,

              //长按输入的文字时，true显示系统的粘贴板  false不显示
              enableInteractiveSelection: true,

              //自定义数字显示   指定maxLength后 右下角会出现字数，flutter有默认实现  可以通过这个自定义
              buildCounter: buildcount,

              //点击一次输入就调用
              onTap: () {
                print('ontap');
              },
              onChanged: (text) {
                //输入内容变化后，调用
                print('change $text');
              },
              onSubmitted: (text) {
                //键盘按回车后调用
                print('submit $text');
              },
              //按回车时调用 先调用此方法  然后调用onSubmitted方法
              onEditingComplete: () {
                print('onEditingComplete');
              },
            ),

buildCounter

当设置了maxLength后，右下角会出现如图红圈内的字数。buildCounter属性，可以自定义右下角的字数显示。

image.png

Widget buildcount(
    /// The build context for the TextField
    BuildContext context, {

    /// 当前字数长度
    @required int currentLength,

    /// 最大字数长度
    @required int maxLength,

    /// 当前输入框是否有焦点
    @required bool isFocused,
  }) {
  //自定义的显示格式
    return Text("$currentLength $maxLength");
  }

TextEditingController和FocusNode

TextEditingController，可以看做TextField的一个引用，通过controller可以获取输入框的文本、设置光标位置、清空输入框等操作。
FocusNode，管理TextField的焦点。

class _FlutterTextFieldPageState extends State<FlutterTextFieldPage> {
  var controller = TextEditingController();
  FocusNode _focusNode = new FocusNode();

//焦点变化时回调
  void focusListener() {
    print(_focusNode.hasFocus);//当前的输入框的焦点
//    _focusNode.unfocus();//释放焦点
  }

//输入框内容变化时回调
  void controllerListener() {
    print(controller.text);//获取输入框内的值
//    controller.text = "aaa";//设置输入框内的值
//    if(controller.text.length>5) {
//      controller.clear(); //清空输入框内的内容
//    }
//    print(controller.selection);//获取当前选中的文字，如果没有选中那么显示当前光标的位置  TextSelection(baseOffset: 4, extentOffset: 4, affinity: TextAffinity.downstream, isDirectional: false)
    //设置文字选中，baseOffset起始index  extentOffset结束index(不含）如果二者相同则是设置光标位置  如果二者不同则是选中它们之间的文字
//    controller.selection = TextSelection(baseOffset: 2, extentOffset: 4, affinity: TextAffinity.downstream, isDirectional: false);
    controller.selection = TextSelection(baseOffset: 1, extentOffset: 1, affinity: TextAffinity.upstream, isDirectional: true);

  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  //添加焦点版本的监听
    _focusNode.addListener(focusListener);
    //添加输入内容改变时的监听
    controller.addListener(controllerListener);
  }

  @override
  void dispose() {
    //disponse时需要处理
    controller.removeListener(controllerListener);
    _focusNode.removeListener(focusListener);
    controller.dispose();
    _focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Divider(
              height: 20,
              color: Colors.grey,
            ),
            TextField(
              controller: controller,  //设置controller
              focusNode: _focusNode, //设置焦点管理
            )
          ]
        )
      )
    );
  }
}

decoration 输入框的边框样式，InputDecoration类型

属性总览如下：

TextField(
              decoration: InputDecoration(
                icon: Icon(Icons.phone), //显示在输入框前面的图标，在文字和下划线前面

                //输入框光标前面的图标和文字
                prefixIcon: Icon(Icons.phone),//显示在输入框内，光标前面的图标，注意icon是在输入框外
                prefixText: "prefixText",//显示在输入框内，光标前面的文字   获得焦点后显示
                prefixStyle: TextStyle(color:Colors.yellow),
                prefix: Image.asset("images/img04.jpg",width: 20, height: 20,),//显示在输入框内，光标前面的指定图片或其他Widget   获取焦点后显示。注意prefix不能与prefixIcon prefixText同时指定

                //输入框光标后面的图标和文字
                suffixIcon: Icon(Icons.phone), //显示在输入框内，光标文字后面，输入框最后面的图标
                suffixText: "suffixText", //显示在输入框内，输入框最后面的文字    但是在suffixIcon之前。 注意suffixText不能与suffix共存
                suffixStyle: TextStyle(color: Colors.yellow),
                suffix: Image.asset("images/img04.jpg",width: 20,height: 20,),  //显示在输入框内，最后面的指定图片或其他Widget

              // 显示在输入的下划线外右下角的文字提示
                counterText:"counterText", //显示在输入的下划线外右下角的文字提示,会覆盖maxLength的右下角显示的字数限制。
                counterStyle: TextStyle(color: Colors.pink),
                counter: Icon(Icons.send),//显示在输入的下划线外右下角的提示,可以是任何Widget ，counterText与counter只能存在一个

              // 输入框的文字提示
                labelText:"labelText", //显示在输入框内的提示语，一旦输入框获取焦点就字体缩小并上移到输入上方，作为提示使用
                labelStyle: TextStyle(color: Colors.green),
                helperText: "helperText", //显示在输入框下划线下面的提示语，提示使用
                helperStyle: TextStyle(color: Colors.blue),
                hasFloatingPlaceholder:true, //默认为true，表示labelText是否上浮，true上浮，false表示获取焦点后labelText消失
                hintText: "hintText", //显示在输入框内的提示信息，当输入框为空时显示，一旦开始输入内容就消失
                hintStyle: TextStyle(color: Colors.grey),
                hintMaxLines: 2, //提示语的做多显示行数，超过行数显示...

              // 错误提示相关
                errorText:"errorText", //在输入框下方的提示语，通常用于错误提示，比如密码错误 用户名错误等  同时输入框的下划线修改为了红色
                errorStyle: TextStyle(color: Colors.orange),
                errorMaxLines: 1, //做多显示的行数  ，超过行数显示...
                errorBorder: UnderlineInputBorder(borderSide: BorderSide( width: 5,color: Colors.orange,style: BorderStyle.solid)), //失去焦点时，error时下划线显示的边框样式，不设置则使用默认的的下划线
                focusedErrorBorder: UnderlineInputBorder(borderSide: BorderSide( width: 5, color: Colors.green, style: BorderStyle .solid)), //获取焦点时，error时下划线显示的边框样式，不设置则使用默认的的下划线

              //输入框内文字 密集显示
                isDense: true, //改变输入框是否为密集型，默认为false，修改为true时，图标及间距会变小  行间距减小

              //内部padding
                contentPadding: EdgeInsets.all(20), //输入框的padding  对内部的文字有效

              //背景色
                fillColor: Colors.red, //输入框内部的填充颜色  需filled=true
                filled: true,

              //启用和禁用输入框时的边框样式
                disabledBorder: UnderlineInputBorder(borderSide: BorderSide(width: 5,color: Colors.blue,style: BorderStyle.solid)), //输入框禁用时，下划线的样式.如果设置了errorText，则此属性无效
                enabledBorder: UnderlineInputBorder(borderSide: BorderSide(width: 5,color: Colors.orange,style: BorderStyle.solid)), //输入框启用时，下划线的样式
                enabled: false,//是否启用输入框
                focusedBorder: UnderlineInputBorder( borderSide: BorderSide(width: 5,color: Colors.blue,style: BorderStyle.solid)), //获取焦点时，下划线的样式
                border: OutlineInputBorder(borderSide: BorderSide(width: 5,color: Colors.yellow,style: BorderStyle.solid)), //级别最低的border，没有设置其他border时显示的border
//                border: InputBorder.none, //隐藏输入框的线


              ),
            ),

分解如下：

icon 显示在输入框前面的图标，在文字和下划线前面。注意icon是在输入框外面

image.png

TextField(
     decoration: InputDecoration(
            icon: Icon(Icons.phone), //显示在输入框前面的图标，在文字和下划线前面
     ),
),

prefix 显示在输入框内，光标前面的指定图片或其他Widge。注意实在输入内部

image.png

TextField(
      decoration: InputDecoration(
             prefix: Image.asset("images/img04.jpg",width: 40,height: 40, ) //显示在输入框内，光标前面的指定图片或其他Widget   获取焦点后显示。注意prefix不能与prefixIcon prefixText同时指定
      ),
),

prefixIcon 显示在输入框内，光标前面的图标，注意icon是在输入框外
prefixText 显示在输入框内，光标前面的文本

image.png

TextField(
        decoration: InputDecoration(
                prefixIcon: Icon(Icons.phone),//显示在输入框内，光标前面的图标，注意icon是在输入框外
                prefixText: "prefixText",//显示在输入框内，光标前面的文字   获得焦点后显示
                prefixStyle: TextStyle(color:Colors.red),//文本样式
       ),
),

suffixIcon 显示在输入框内，光标文字后面，输入框最后面的图标
suffixText 显示在输入框内，光标文字后面，输入框最后面的文本

TextField(
        decoration: InputDecoration(
                suffixIcon: Icon(Icons.phone), //显示在输入框内，光标文字后面，输入框最后面的图标
                suffixText: "suffixText", //显示在输入框内，输入框最后面的文字    但是在suffixIcon之前。 注意suffixText不能与suffix共存
                suffixStyle: TextStyle(color: Colors.red),//文本样式
        ),
),

suffix 显示在输入框内，最后面的指定图片或其他Widget。注意suffixText不能与suffix共存

image.png

TextField(
        decoration: InputDecoration(
                suffix: Image.asset("images/img04.jpg",width: 40,height: 40,)  //显示在输入框内，最后面的指定图片或其他Widget 
        ),
),

counterText 显示在输入的下划线外右下角的文字提示,会覆盖maxLength的右下角显示的字数限制。counterText与counter只能存在一个

image.png

TextField(
       maxLength: 33,
       decoration: InputDecoration(
                counterText:"counterText", //显示在输入的下划线外右下角的文字提示,会覆盖maxLength的右下角显示的字数限制。
                counterStyle: TextStyle(color: Colors.pink),
      ),
),

counter 显示在输入的下划线外右下角的提示,可以是任何Widget ，counterText与counter只能存在一个

image.png

TextField(
        maxLength: 33,
        decoration: InputDecoration(
                counter: Icon(Icons.send),//显示在输入的下划线外右下角的提示,可以是任何Widget ，counterText与counter只能存在一个
        ),
),

labelText 显示在输入框内的提示语，一旦输入框获取焦点就字体缩小并上移到输入上方，作为提示使用
hasFloatingPlaceholder 默认为true，表示labelText是否上浮，true上浮，false表示获取焦点后labelText消失。

hasFloatingPlaceholder 为true 输入框无焦点时：

image.png

hasFloatingPlaceholder 为true 有焦点时：

image.png
hasFloatingPlaceholder 为false 输入框无焦点时：

image.png

hasFloatingPlaceholder 为false有焦点时：labelText消失

image.png

TextField(
       decoration: InputDecoration(
                icon: Icon(Icons.phone),
                labelText:"labelText", //显示在输入框内的提示语，一旦输入框获取焦点就字体缩小并上移到输入上方，作为提示使用
                labelStyle: TextStyle(color: Colors.green),
                hasFloatingPlaceholder:
                    false, //默认为true，表示labelText是否上浮，true上浮，false表示获取焦点后labelText消失
      ),
),

helperText 显示在输入框下划线下面的提示语，提示使用

image.png

TextField(
        decoration: InputDecoration(
                icon: Icon(Icons.phone),
                helperText: "helperText", //显示在输入框下划线下面的提示语，提示使用
                helperStyle: TextStyle(color: Colors.blue),
       ),
),

hintText 显示在输入框内的提示信息，当输入框为空时显示，一旦开始输入内容就消失
输入框内容为空时：

image.png

输入框内容不为空时：hintText不显示

image.png

TextField(
      decoration: InputDecoration(
                icon: Icon(Icons.phone),
                hintText: "hintText", //显示在输入框内的提示信息，当输入框为空时显示，一旦开始输入内容就消失
                hintStyle: TextStyle(color: Colors.grey),
                hintMaxLines: 2, //提示语的最多显示行数，超过行数显示...
      ),
),

errorText 在输入框下方的提示语，通常用于错误提示，比如密码错误用户名错误等同时输入框的下划线修改为了红色
errorMaxLines 做多显示的行数，超过行数显示...
errorBorder 失去焦点时，error时下划线显示的边框样式，不设置则使用默认的的下划线
focusedErrorBorder 获得焦点时，error时下划线显示的边框样式，不设置则使用默认的的下划线
无焦点时使用errorBorder

image.png

有焦点时使用focusedErrorBorder

image.png

TextField(
       decoration: InputDecoration(
                icon: Icon(Icons.phone),
                errorText: "errorText", //在输入框下方的提示语，通常用于错误提示，比如密码错误 用户名错误等  同时输入框的下划线修改为了红色
                errorStyle: TextStyle(color: Colors.orange),
                errorMaxLines: 1, //做多显示的行数  ，超过行数显示...
                errorBorder: UnderlineInputBorder(borderSide: BorderSide(width: 5,color: Colors.orange,style: BorderStyle.solid)), //失去焦点时，error时下划线显示的边框样式，不设置则使用默认的的下划线
                focusedErrorBorder: UnderlineInputBorder( borderSide: BorderSide(width: 5, color: Colors.green,style: BorderStyle.solid)), //获得焦点时，error时下划线显示的边框样式，不设置则使用默认的的下划线
       ),
),

contentPadding 输入框的padding 对内部的文字有效
isDense 改变输入框是否为密集型，默认为false，修改为true时，图标及间距会变小行间距减小

TextField(
       decoration: InputDecoration(
                icon: Icon(Icons.phone),
                contentPadding: EdgeInsets.all(20), //输入框的padding  对内部的文字有效
                isDense: true, //改变输入框是否为密集型，默认为false，修改为true时，图标及间距会变小  行间距减小
       ),
),

fillColor 输入框内部的填充颜色需filled=true
filled 是否填充

image.png

TextField(
        maxLength: 311,
        maxLines: 3,
        decoration: InputDecoration(
                icon: Icon(Icons.phone),
                fillColor: Colors.red, //输入框内部的填充颜色  需filled=true
                filled: true,
         ),
),

enabled 是否启用输入框 true启用 false禁用
disabledBorder 禁用时的border
enabledBorder 启用时的border
focusedBorder 获得焦点后的border

禁用时的border

image.png

启用时的border

image.png
获得焦点后的border

image.png

TextField(
      decoration: InputDecoration(
                icon: Icon(Icons.phone),
//                errorText: "errorText",
                disabledBorder: UnderlineInputBorder( borderSide: BorderSide(width: 5,color: Colors.blue,style: BorderStyle.solid)), //输入框禁用时，下划线的样式.如果设置了errorText，则此属性无效
                enabledBorder: UnderlineInputBorder(borderSide: BorderSide(width: 5, color: Colors.orange,style: BorderStyle.solid)), //输入框启用时，下划线的样式
                focusedBorder: UnderlineInputBorder( borderSide: BorderSide(width: 5,color: Colors.red,style:BorderStyle.solid)), //获取焦点时，下划线的样式
                enabled: true,
     ),
),

border 级别最低的border，没有设置其他border时显示的border

TextField(
       decoration: InputDecoration(
                icon: Icon(Icons.phone),
                border: OutlineInputBorder( borderSide: BorderSide(width: 5,color: Colors.yellow, style: BorderStyle.solid)), //级别最低的border，没有设置其他border时显示的border
       ),
),

border 边框，取值分为四面的边框OutlineInputBorder 和下划线框UnderlineInputBorder
如一个focusedBorder设置OutlineInputBorder

image.png

如一个enabledBorder设置UnderlineInputBorder

image.png

TextField(
       decoration: InputDecoration(
                prefixIcon: Icon(Icons.phone),
                focusedBorder: OutlineInputBorder(borderSide: BorderSide(width: 5, color: Colors.red, style: BorderStyle.solid), borderRadius: BorderRadius.circular(30),), //获取焦点时，下划线的样式
                enabledBorder: UnderlineInputBorder(borderSide: BorderSide(width: 5,color: Colors.orange,style: BorderStyle .solid)), //输入框启用时，下划线的样式.但是如果获取了焦点就要编程focusedBOrder了
                enabled: true,
       ),
),

border 边框，隐藏边框取值InputBorder.none

image.png

TextField(
     decoration: InputDecoration(
                prefixIcon: Icon(Icons.phone),
                border: InputBorder.none, //隐藏输入框的线
     ),
),

Flutter（五）TextField

TextField 输入框

buildCounter

TextEditingController和FocusNode

decoration 输入框的边框样式，InputDecoration类型

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Flutter