发现

任务

客服工单

发文章

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

超哥 2024-2-17 16:43:53 1898 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();

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

  9. // 取消锚点（在需要取消的时候调用）
  10. 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. )
复制代码


举报

您需要登录后才可以回帖 登录 | 立即注册
超哥
优秀作者 助人为乐 人气作者
文章
36
问答
67
粉丝
0

所属分类: 问答交流

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

GMT+8, 2025-2-1 02:58, Processed in 0.179016 second(s), 34 queries.© 2003-2025 cbk Team.

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