发现

任务

客服工单

发文章

Flutter TextField使用

分享
siman 2023-10-10 18:55:52 1059 0 来自 中国
Flutter TextField使用
  1. TextField(
  2.               controller: controller,
  3.               //允许输入的最大长度，一个字母一个符号一个汉字都算1 且右下角有字数显示
  4.               maxLength: 20,
  5.               //超过最大长度后是否还允许继续输入
  6. //              maxLengthEnforced: true,//默认true  超过长度后输入无效  右下角数字 显示10/10   此时onchange方法依然会调用，返回值就是限制了长度的值 超过后的输入不显示
  7.               maxLengthEnforced: false, //超过后可继续输入  右下角数字显示，比如 23/10

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

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

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

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

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

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

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

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

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

  60.               //设置键盘上enter键的显示内容
  61.               textInputAction: TextInputAction.search, //搜索
  62. //              textInputAction: TextInputAction.none,//默认回车符号
  63. //              textInputAction: TextInputAction.done,//安卓显示 回车符号
  64. //              textInputAction: TextInputAction.go,//开始
  65. //              textInputAction: TextInputAction.next,//下一步
  66. //              textInputAction: TextInputAction.send,//发送
  67. //              textInputAction: TextInputAction.continueAction,//android  不支持
  68. //              textInputAction: TextInputAction.emergencyCall,//android  不支持
  69. //              textInputAction: TextInputAction.newline,//安卓显示 回车符号
  70. //              textInputAction: TextInputAction.route,//android  不支持
  71. //              textInputAction: TextInputAction.join,//android  不支持
  72. //              textInputAction: TextInputAction.previous,//安卓显示 回车符号
  73. //              textInputAction: TextInputAction.unspecified,//安卓显示 回车符号

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

  81.               //光标颜色
  82.               cursorColor: Colors.red,
  83.               //光标圆角
  84.               cursorRadius: Radius.circular(5),
  85.               //光标宽度
  86.               cursorWidth: 10,

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

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

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

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

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

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

  120.               //点击一次输入就调用
  121.               onTap: () {
  122.                 print('ontap');
  123.               },
  124.               onChanged: (text) {
  125.                 //输入内容变化后，调用
  126.                 print('change $text');
  127.               },
  128.               onSubmitted: (text) {
  129.                 //键盘按回车后调用
  130.                 print('submit $text');
  131.               },
  132.               //按回车时调用 先调用此方法  然后调用onSubmitted方法
  133.               onEditingComplete: () {
  134.                 print('onEditingComplete');
  135.               },
  136.             ),
复制代码



举报

您需要登录后才可以回帖 登录 | 立即注册
siman
优秀作者 助人为乐 人气作者
文章
92
问答
127
粉丝
4

所属分类: 问答交流

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

GMT+8, 2024-4-27 14:43 , Processed in 0.181274 second(s), 34 queries . © 2003-2025 cbk Team.

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