Flutter输入框TextField属性超详细说明

超哥 2024-2-17 16:43:53 471 0 来自 中国
  1.   const TextField({
  2.     Key key,
  3.     this.controller,//控制器
  4.     this.focusNode,//焦点
  5.     this.decoration = const InputDecoration(),//装饰
  6.     TextInputType keyboardType,//键盘类型,即输入类型
  7.     this.textInputAction,//键盘按钮
  8.     this.textCapitalization = TextCapitalization.none,//大小写
  9.     this.style,//样式
  10.     this.strutStyle,
  11.     this.textAlign = TextAlign.start,//对齐方式
  12.     this.textDirection,
  13.     this.autofocus = false,//自动聚焦
  14.     this.obscureText = false,//是否隐藏文本,即显示密码类型
  15.     this.autocorrect = true,//自动更正
  16.     this.maxLines = 1,//最多行数,高度与行数同步
  17.     this.minLines,//最小行数
  18.     this.expands = false,
  19.     this.maxLength,//最多输入数,有值后右下角就会有一个计数器
  20.     this.maxLengthEnforced = true,
  21.     this.onChanged,//输入改变回调
  22.     this.onEditingComplete,//输入完成时,配合TextInputAction.done使用
  23.     this.onSubmitted,//提交时,配合TextInputAction
  24.     this.inputFormatters,//输入校验
  25.     this.enabled,//是否可用
  26.     this.cursorWidth = 2.0,//光标宽度
  27.     this.cursorRadius,//光标圆角
  28.     this.cursorColor,//光标颜色
  29.     this.keyboardAppearance,
  30.     this.scrollPadding = const EdgeInsets.all(20.0),
  31.     this.dragStartBehavior = DragStartBehavior.start,
  32.     this.enableInteractiveSelection,
  33.     this.onTap,//点击事件
  34.     this.buildCounter,
  35.     this.scrollPhysics,
  36.   })
复制代码
InputDecoration属性参数说明
  1. InputDecoration({
  2.   this.icon,    //位于装饰器外部和输入框前面的图标
  3.   this.labelText,  //用于描述输入框,例如这个输入框是用来输入用户名还是密码的,当输入框获取焦点时默认会浮动到上方,
  4.   this.labelStyle,  // 控制labelText的样式,接收一个TextStyle类型的值
  5.   this.helperText, //辅助文本,位于输入框下方,如果errorText不为空的话,则helperText不会显示
  6.   this.helperStyle, //helperText的样式
  7.   this.hintText,  //提示文本,位于输入框内部
  8.   this.hintStyle, //hintText的样式
  9.   this.hintMaxLines, //提示信息最大行数
  10.   this.errorText,  //错误信息提示
  11.   this.errorStyle, //errorText的样式
  12.   this.errorMaxLines,   //errorText最大行数
  13.   this.hasFloatingPlaceholder = true,  //labelText是否浮动,默认为true,修改为false则labelText在输入框获取焦点时不会浮动且不显示
  14.   this.isDense,   //改变输入框是否为密集型,默认为false,修改为true时,图标及间距会变小
  15.   this.contentPadding, //内间距
  16.   this.prefixIcon,  //位于输入框内部起始位置的图标。
  17.   this.prefix,   //预先填充的Widget,跟prefixText同时只能出现一个
  18.   this.prefixText,  //预填充的文本,例如手机号前面预先加上区号等
  19.   this.prefixStyle,  //prefixText的样式
  20.   this.suffixIcon, //位于输入框后面的图片,例如一般输入框后面会有个眼睛,控制输入内容是否明文
  21.   this.suffix,  //位于输入框尾部的控件,同样的不能和suffixText同时使用
  22.   this.suffixText,//位于尾部的填充文字
  23.   this.suffixStyle,  //suffixText的样式
  24.   this.counter,//位于输入框右下方的小控件,不能和counterText同时使用
  25.   this.counterText,//位于右下方显示的文本,常用于显示输入的字符数量
  26.   this.counterStyle, //counterText的样式
  27.   this.filled,  //如果为true,则输入使用fillColor指定的颜色填充
  28.   this.fillColor,  //相当于输入框的背景颜色
  29.   this.errorBorder,   //errorText不为空,输入框没有焦点时要显示的边框
  30.   this.focusedBorder,  //输入框有焦点时的边框,如果errorText不为空的话,该属性无效
  31.   this.focusedErrorBorder,  //errorText不为空时,输入框有焦点时的边框
  32.   this.disabledBorder,  //输入框禁用时显示的边框,如果errorText不为空的话,该属性无效
  33.   this.enabledBorder,  //输入框可用时显示的边框,如果errorText不为空的话,该属性无效
  34.   this.border, //正常情况下的border
  35.   this.enabled = true,  //输入框是否可用
  36.   this.semanticCounterText,  
  37.   this.alignLabelWithHint,
  38. })
复制代码



设置输入框边框decoration


TextField默认的边框样式只有一个下边框,修改时使用decoration修改, 由于边框的优先级,直接设置border会发现效果不会正常显示,所以需要通过配置InputDecoration中的enabledBorder修改未选中状态的边框,配置InputDecoration中的focusedBorder修改选中状态的边框


  1. TextField(
  2.   decoration: InputDecoration(
  3.     // 设置未选中状态的边框
  4.     enabledBorder: OutlineInputBorder(
  5.       borderSide: BorderSide(
  6.         width: 1,
  7.         color: Colors.red,
  8.       ),
  9.       borderRadius: BorderRadius.all(Radius.circular(8)),
  10.     ),
  11.     // 设置选中状态的边框
  12.     focusedBorder: OutlineInputBorder(
  13.       borderSide: BorderSide(
  14.         width: 1,
  15.         color: Colors.blue,
  16.       ),
  17.       borderRadius: BorderRadius.all(Radius.circular(8)),
  18.     ),
  19.   ),
  20. ),
复制代码
隐藏输入框文本(密码输入框)obscureText

  1. TextField(
  2.   obscureText: true,
  3. )
复制代码

设置数字输入框(只允许输入数字)keyboardType

通过keyboardType属性修改,接受值为:

TextInputType.text
TextInputType.number
TextInputType.multiline
TextInputType.phone
TextInputType.datetime
TextInputType.emailAddress
TextInputType.url
TextInputType.visiblePassword
TextInputType.name
TextInputType.streetAddress
  1. TextField(
  2. keyboardType: TextInputType.number,
  3. )
复制代码


设置键盘右下角按钮风格(textInputAction)

通过keyboardType属性修改,接受值为:

TextInputAction.none
TextInputAction.unspecified 操作系统自己选择最优
TextInputAction.done 完成
TextInputAction.go 前往
TextInputAction.search 搜索
TextInputAction.send 发送
TextInputAction.next 下一项
TextInputAction.previous 上一个(ios不支持)
TextInputAction.continueAction 继续(仅ios支持)
TextInputAction.join 加入(仅ios支持)
TextInputAction.route 路线(仅ios支持)
TextInputAction.emergencyCall 紧急呼叫(仅ios支持)
TextInputAction.newline 安卓(换行回车)ios(返回)
  1. TextField(
  2.   textInputAction: TextInputAction.next
  3. )
复制代码
输入框获取锚点后,取消锚点,并隐藏软键盘

  1. // 初始化
  2. FocusNode userFocusNode = FocusNode();

  3. // 配置给TextField
  4. TextField(
  5.   focusNode: userFocusNode,
  6. )

  7. // 取消锚点(在需要取消的时候调用)
  8. userFocusNode.unfocus();
复制代码
多个输入框时,使用GestureDetector控制点击空白区域取消锚点

  1. class _HomeWidget extends State<HomeWidget> {
  2.   @override
  3.   Widget build(BuildContext context) {
  4.     // TODO: implement build
  5.     return GestureDetector(
  6.       onTap: () {
  7.         // 点击空白区域让搜索框取消锚点
  8.         FocusScopeNode currentFocus = FocusScope.of(context);
  9.         if (!currentFocus.hasPrimaryFocus &&
  10.             currentFocus.focusedChild != null) {
  11.           FocusManager.instance.primaryFocus?.unfocus();
  12.         }
  13.       },
  14.       child: Scaffold(
  15.         body: TextField(),
  16.       ),
  17.     );
  18.   }
  19. }
复制代码
修改输入框高度

在外层套一个Container或者SizeBox
  1. Container(
  2.   height: 32,
  3.   child: const TextField(),
  4. )
复制代码
在显示前置图标prefixIcon时, 解决文字和图标不横排问题

修改contentPadding修改



  1. TextField(
  2.   // ...
  3.   decoration: InputDecoration(
  4.     contentPadding: EdgeInsets.zero,
  5.   ),
  6.   // ...
  7. )
复制代码
解决使用prefixIcon图标和文字间距问题

  1. TextField(
  2.   // ...
  3.   decoration: InputDecoration(
  4.     // minWidth 图标的最小宽度,通过设置最小宽,实现自定义间距
  5.     // minHeight 图标的最小高度
  6.     prefixIconConstraints: BoxConstraints(minWidth: 32, minHeight: 32),
  7.   ),
  8.   // ...
  9. )
复制代码


您需要登录后才可以回帖 登录 | 立即注册

Powered by CangBaoKu v1.0 小黑屋 藏宝库It社区 ( 冀ICP备14008649号 )

GMT+8, 2024-4-22 04:29 , Processed in 0.177874 second(s), 35 queries . © 2003-2025 cbk Team.

快速回复 返回顶部 返回列表