• 0

  • 473

  • 收藏

Flutter基础-005-TextField

1星期前
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, //隐藏输入框的线
     ),
),
复制代码
免责声明:文章版权归原作者所有,其内容与观点不代表Unitimes立场,亦不构成任何投资意见或建议。

ios

473

相关文章推荐

未登录头像

暂无评论