image.png

✨✨✨✨✨ 魏什么_多喝水 Flutter 之路

语雀

简介

文本输入框

const TextField({
    Key key,
    this.controller,  //控制 TextField 的编辑，如果没有设置，会有默认值   
    this.focusNode,   //用于控制TextField是否占有当前键盘的输入焦点.它是我们和键盘交互的一个handle
    this.decoration = const InputDecoration(), //用于控制TextField的外观显示，如提示文本、背景颜色、边框等
    TextInputType keyboardType,  //用于设置该输入框默认的键盘输入类型
    this.textInputAction,        //设置键盘上enter键的显示内容
    this.textCapitalization = TextCapitalization.none, //定义文本的大写格式
    this.style,       //文本样式
    this.strutStyle,  //支撑样式
    this.textAlign = TextAlign.start, //对齐方式
    this.textAlignVertical,   //输入框文字的垂直对齐方式 top.center.bottom
    this.textDirection,       //文字方向
    this.readOnly = false,    //是否自读,true后不可编辑
    ToolbarOptions toolbarOptions, //点击、长按弹出的窗口，里面有复制、粘贴、剪切、全选功能
    this.autofocus = false,   //是否自动获取焦点  跳转到该页面后 光标自动显示到该输入框  键盘弹起
    this.obscureText = false, //是否是密码  非密码以明文显示，密码以点显示
    this.autocorrect = true,  //是否自动更正
    this.enableSuggestions = true, //启用建议
    this.maxLines = 1,        //不是允许输入的最大行数,指的是输入框内可显示的高度是几行，超过设定行数后，scroll滚动显示
    this.minLines,            //最小行数
    this.expands = false,     //扩展
    this.maxLength,           //输入框中允许的最大字符数.设置此项会让TextField右下角有一个输入数量的统计字符串
    this.maxLengthEnforced = true,//是否强制限制最大字符数，默认为true.
                                                                    true：强制限制最大字符数.
                                    false：不限制最大字符数，即使设置了maxLength也不生效
    
    this.onChanged,           //监听输入框内容变化
    this.onEditingComplete,   //输入框输入完成时触发，但是onEditingComplete没有参数，不会返回内容
    this.onSubmitted,         //输入框输入完成时触发，但是onSubmitted有参数，会返回内容
  
    this.inputFormatters,     //用于指定输入格式；当用户输入内容改变时，会根据指定的格式来校验。
    this.enabled,             //输入框是否禁用如果为false，则输入框会被禁用，禁用状态不接收输入和事件，同时显示禁用态样式（在其decoration中定义）。
  
    this.showCursor,          //是否显示光标
    this.cursorWidth = 2.0,   //自定义输入框光标宽度
    this.cursorRadius,        //自定义输入框光标圆角
    this.cursorColor,         //自定义输入框光标颜色
  
    this.keyboardAppearance,  //设置键盘的亮度模式只能在iOS上使用，有两种：Brightness.dart和Brightness.light
    this.scrollPadding = const EdgeInsets.all(20.0),  //文本框滑动时的间距
    this.dragStartBehavior = DragStartBehavior.start, //设置确定当用户启动拖动时拖动正式开始的时间
    this.enableInteractiveSelection = true, //是否启用交互式选择 true：长按将会选中文字，并且弹出 cut/copy/paste 的菜单
    this.onTap,               //TextField的点击事件  
    this.buildCounter,        //生成自定义 InputDecorator.counter 小部件的回调.
                                当设置了maxLength后，右下角会出现如图红圈内的字数。
                                buildCounter属性，可以自定义右下角的字数显示。
    this.scrollController,
    this.scrollPhysics,
  })

1. controller 控制 TextField 的编辑

TextEditingController 是 TextField 的控制类，可以控制 TextField 的编辑，是 TextField 的 controller 属性，我们可以为 TextField 赋值自己创建的 TextEditingController 对象来控制 TextField。 使用代码如下：

class TextFieldWidget extends StatelessWidget {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return 
        ...
        TextField(
            controller: _controller,
        ),
        ...
    );
  }
}

然后使用 _controller.text 来访问 TextField 里的内容。 点击按钮的时候直接读取 controller.text的值

2. 控制焦点 focusNode 用于控制TextField是否占有当前键盘的输入焦点

3. decoration 外观显示

const InputDecoration({
    this.icon,       //显示在输入框前面的图标，在文字和下划线前面
    this.labelText,  //显示在输入框内的提示语
    this.labelStyle, //提示语的样式
  
    this.helperText, //显示在输入框下面的提示语
    this.helperStyle, //输入框下面提示用的样式
    this.helperMaxLines,//输入框下面提示语的最大行数,默认 1 超过显示..
    this.hintText,      //焦点在输入框内的提示文字
    this.hintStyle,     //焦点在输入框内的提示文字风格
    this.hintMaxLines,  //焦点在输入框内的提示文字最大行数, 默认 1 超过显示..
    this.errorText,     //输入框下面的错误提示文字. 比如手机号、密码输入错误时候的提示。同事输入框下边线变红色
    this.errorStyle,    //输入框下面的错误提示风格
    this.errorMaxLines, //输入框下面的错误提示最大行数, 默认 1 超过显示..
  
    this.hasFloatingPlaceholder = true, labelText是否上浮，true上浮，false表示获取焦点后labelText消失
    this.isDense,   //改变输入框是否为密集型，默认为false，修改为true时，图标及间距会变小  行间距减小
    this.contentPadding, //输入框的padding  对内部的文字有效
  
    this.prefixIcon,     //显示在输入框内，光标前面的图标，注意icon是在输入框外
    this.prefix,         //输入框之前的组件,(我试了好几次都失败..😂...)
    this.prefixText,     //显示在输入框内，光标前面的文本
    this.prefixStyle,    //显示在输入框内，光标前面的文本风格
  
    this.suffixIcon,     //显示在输入框内，光标后面的图标,显示在最后
    this.suffix,
    this.suffixText,     //显示在输入框内，光标后面的文字,显示在最后
    this.suffixStyle,    //显示在输入框内，光标后面的文字风格
  
    this.counter,        //显示在输入的下划线外右下角的文字提示,会覆盖maxLength的右下角显示的字数限制。counterText与counter只能存在一个
    this.counterText,    //显示在输入的下划线外右下角的文字提示 同上
    this.counterStyle,   //显示在输入的下划线外右下角的文字提示风格
  
    this.filled,         //输入框内部是否允许填充 默认 false
    this.fillColor,      //输入框内部填充颜色.filled设置为ture
    this.focusColor,     
    this.hoverColor,
  
    this.errorBorder,        //失去焦点时，error时下划线显示的边框样式,不设置则使用默认的的下划线
    this.focusedBorder,      //获得焦点后的下划线显示的边框样式
    this.focusedErrorBorder, //获得焦点时，error时下划线显示的边框样式,不设置则使用默认的的下划线
    this.disabledBorder,     //输入框禁用时，下划线显示的边框样式
    this.enabledBorder,      //启用时的,下划线显示的边框样式
    this.border,             //级别最低的border，没有设置其他border时显示的border
    this.enabled = true,     //是否启用输入  如果是false 就无法输入了，且errorText失效
    this.semanticCounterText,
    this.alignLabelWithHint,
  }) 

1. icon 显示在输入框前面的图标，在文字和下划线前面

 TextField(
  decoration: InputDecoration(
    icon: Icon(
      Icons.phone_iphone,
      color: Colors.blue,
    ),
 ),

image.png

2. labelText、helperText、hintText

 TextField(
  controller: _controller,
  decoration: InputDecoration(
    icon: Icon(
      Icons.phone_iphone,
      color: Colors.blue,
    ),
    //显示默认提示语
    labelText: "请输入您的手机号!",
    //默认提示语的样式修改
    labelStyle: TextStyle(
      fontSize: 15,
      color: Colors.grey
    ),
    //输入框下面的提示语
    helperText: "手机号必须为数字11位号码哟~",
    //输入框下面提示语的样式
    helperStyle: TextStyle(
      fontSize: 11,
      color: Colors.red
    ),
    //输入框下面提示语的最大行数,默认 1
    helperMaxLines: 1,
    //焦点在输入框内的提示文字
    hintText: "hintText",
    //焦点在输入框内的提示文字风格
    hintStyle: TextStyle(
      fontSize: 13,
      color: Colors.deepPurple,
    ),
    //焦点在输入框内的提示文字醉倒行数, 默认 1
    hintMaxLines: 1,
  ),
),

image.png image.png image.png

3. hasFloatingPlaceholder labelText是否上浮，true上浮，false表示获取焦点后labelText消失

hasFloatingPlaceholder: false,

image.png

4. prefix、prefixText、prefixStyle

 TextField(
  controller: _controller,
  decoration: InputDecoration(
    icon: Icon(
      Icons.phone_iphone,
      color: Colors.blue,
    ),
    //显示默认提示语
    labelText: "请输入您的手机号!",
    //输入框下面的提示语
    helperText: "手机号必须为数字11位号码哟~",
    prefixIcon: Image.asset(
      "image/flutter1.png",
      width: 20,
      height: 20,
    ),
    prefixText: "prefixText",
  ),
),

image.png image.png

5. suffix、suffixIcon、suffixText、suffixStyle

 TextField(
  controller: _controller,
  decoration: InputDecoration(
    icon: Icon(
      Icons.phone_iphone,
      color: Colors.blue,
    ),
    //显示默认提示语
    labelText: "请输入您的手机号!",
    //输入框下面的提示语
    helperText: "手机号必须为数字11位号码哟~",
    suffixIcon: Image.asset(
        "image/flutter1.png",
        width: 20,
        height: 20,
    ),
    suffixText: "suffixText",
  ),
),

image.png image.png

6. counter、counterText、counterStyle

 TextField(
  controller: _controller,
  decoration: InputDecoration(
    icon: Icon(
      Icons.phone_iphone,
      color: Colors.blue,
    ),
    //显示默认提示语
    labelText: "请输入您的手机号!",
    counterText: "counterText",
    counterStyle: TextStyle(
      color: Colors.red
    ),
  ),
),

image.png

TextField(
  controller: _controller,
  decoration: InputDecoration(
    icon: Icon(
      Icons.phone_iphone,
      color: Colors.blue,
    ),
    //显示默认提示语
    labelText: "请输入您的手机号!",
    counter: Icon(
      Icons.android
    ),
  ),
),

image.png

7. filled、fillColor

 TextField(
  controller: _controller,
  decoration: InputDecoration(
    icon: Icon(
      Icons.phone_iphone,
      color: Colors.blue,
    ),
    labelText: "请输入您的手机号!",
    filled: true,
    fillColor: Colors.deepPurple
  ),
),

image.png

8. errorBorder、focusedErrorBorder

TextField(
  controller: _controller,
  decoration: InputDecoration(
    icon: Icon(
      Icons.phone_iphone,
      color: Colors.blue,
    ),
    labelText: "请输入您的手机号!",
    errorText: "errorText",
    errorBorder: UnderlineInputBorder(
      borderSide: BorderSide(
        width: 3,
        color: Colors.lightGreenAccent,
        style: BorderStyle.solid
      ),
    )
  ),
),

image.png

image.png

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

 TextField(
  decoration: InputDecoration(
    contentPadding: EdgeInsets.all(10.0),
    prefixIcon: Icon(
      Icons.phone_iphone
    ),
    labelText: "请输入您的手机号!",
    border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(15.0),
    ),
  ),
),

image.png image.png

改变border的颜色:

 Theme(
  data: new ThemeData(primaryColor: Colors.red, hintColor: Colors.grey),

  child: TextField(
    decoration: InputDecoration(
      contentPadding: EdgeInsets.all(10.0),
      labelText: "请输入您的手机号!",
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(15.0),
      ),
    ),
  ),
),

image.png

3. 键盘类型 keyboardType

名称	含义
TextInputType.text	文本输入键盘
TextInputType.multiline	多行文本，需和maxLines配合使用(设为null或大于1)
TextInputType.number	数字；会弹出数字键盘
TextInputType.phone	优化后的电话号码输入键盘；会弹出数字键盘并显示"* #"
TextInputType.datetime	优化后的日期输入键盘；Android上会显示“: -”
TextInputType.emailAddress	优化后的电子邮件地址；会显示“@ .”
TextInputType.url	优化后的url输入键盘； 会显示“/ .”

4. 设置键盘上enter键的显示内容 textInputAction

名称	含义
TextInputAction.none	默认回车符号
TextInputAction.search	搜索
TextInputAction.done	安卓显示 回车符号,苹果完成
TextInputAction.go	开始
TextInputAction.next	下一步
TextInputAction.send	发送
TextInputAction.continueAction	继续，安卓不支持
TextInputAction.emergencyCall	紧急电话,安卓不支持
TextInputAction.newline	安卓显示 回车符号
TextInputAction.route	路线，安卓不支持
TextInputAction.join	加入，安卓不支持
TextInputAction.previous	上一步，安卓 回车符号
extInputAction.unspecified	安卓显示回车符

5. 指定输入格式 inputFormatters

 TextField(
  //只允许输入数字  digitsOnly表示只允许数字。
  inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],
  //只允许输入a-z小写字母
  //inputFormatters: [WhitelistingTextInputFormatter(RegExp("[a-z]"))],

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

  //黑名单校验，只允许输入给定规则以外的文本
  //不允许输入a-z小写字母
  //inputFormatters: [BlacklistingTextInputFormatter(RegExp("[a-z]"))],
  //不允许输入a-z小写字母  如果输入了 用“-”替代
  //inputFormatters: [BlacklistingTextInputFormatter(RegExp("[a-z]"),replacementString: "-")],
  maxLength: 20,
  decoration: InputDecoration(
    contentPadding: EdgeInsets.all(10.0),
    prefixIcon: Icon(
      Icons.phone_iphone
    ),
    labelText: "请输入您的手机号!",
    border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(15.0),
    ),
  ),
),

6. 监听文本变化 this.onChanged、this.onEditingComplete、 this.onSubmitted

1. 通过 onChange回调

TextField(
  autofocus: true,
  controller: _controller,
  maxLength: 40,
  onChanged: (text) {
    print(text);
  },
),

2. 通过controller监听

class _MyHomePageState extends State<MyHomePage> {
  
  //定义textEditingController
  final TextEditingController _controller = TextEditingController();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    _controller.text = "你好flutter";
    //第三个字符开始选中后面的字符
    _controller.selection = TextSelection(
      baseOffset: 2,
      extentOffset: _controller.text.length
    );
    // 监听输入变化
    _controller.addListener((){
        print(_controller.text);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        backgroundColor: Colors.blue,
      ),
      backgroundColor: Colors.white,
      body: Container(
        padding: EdgeInsets.all(20),
        child: Column(
          children: <Widget>[
            TextField(
              controller: _controller,
            ),
          ],
        ),
      ),
    );
  }
}