Flutter 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');
- },
- ),
复制代码
|