属性介绍
const TextField({
Key key,
this.controller, //文本控制器
this.focusNode, //焦点控制
this.decoration = const InputDecoration(), //边框装饰
TextInputType keyboardType, // 键盘类型
this.textInputAction, //键盘的操作按钮
this.textCapitalization = TextCapitalization.none, //用户输入类型
this.style, //输入文本样式
this.strutStyle,
this.textAlign = TextAlign.start, //水平方向对齐方式。 值为 left、 right 、center、 justify 、 start、 end
this.textAlignVertical, // 文本垂直方向对齐方式 。 值为 top 、 center 、 bottom
this.textDirection, //文本方向 rtl(right to left) ltr(left to right)
this.readOnly = false,
ToolbarOptions toolbarOptions, //工具栏选项的配置
this.showCursor, //是否显示光标
this.autofocus = false, //自动获取焦点
this.obscuringCharacter = '•', //隐藏内容时,显示的文字
this.obscureText = false, // 是否隐藏内容,例如密码格式
this.autocorrect = true, //是否自动校正
SmartDashesType smartDashesType, //指示如何处理文本输入中破折号的智能替换
SmartQuotesType smartQuotesType, //指示如何处理文本输入中引号的智能替换。
this.enableSuggestions = true, //启用建议
this.maxLines = 1, //最大行数
this.minLines, //最小行数
this.expands = false, //
this.maxLength, // 最多输入数,有值后右下角就会有一个计数器
this.maxLengthEnforced = true, //是否允许超过输入最大长度
this.onChanged, // 文本内容变更时回调
this.onEditingComplete, // 输入完成回调 主要配合TextInputAction.done使用
this.onSubmitted, //提交 配合TextInputAction
this.onAppPrivateCommand,
this.inputFormatters, //输入校验
this.enabled, //是否可用
this.cursorWidth = 2.0, // 光标宽度
this.cursorHeight, //光标高度
this.cursorRadius, //光标圆角
this.cursorColor, //光标颜色
this.selectionHeightStyle = ui.BoxHeightStyle.tight,
this.selectionWidthStyle = ui.BoxWidthStyle.tight,
this.keyboardAppearance, // 键盘亮度
this.scrollPadding = const EdgeInsets.all(20.0), // 滚动到视图中时,填充边距
this.dragStartBehavior = DragStartBehavior.start,
this.enableInteractiveSelection = true, // 长按是否展示 剪切/复制/粘贴菜单
this.onTap, //点击事件
this.mouseCursor, // 鼠标指针进入或悬停在鼠标指针上时的光标
this.buildCounter,
this.scrollController, //控制可滚动的小部件
this.scrollPhysics, //确定[Scrollable]小部件的物理性质。
this.autofillHints,//自动填充提示
this.restorationId, //恢复ID以保存和恢复文本字段的状态。
当我们使用border得时候,发现,文字是正常的,而去除了border之后,文字过多,就可能只显示一半,所以,解决方式还是得从boder入手,
使用透明得边框即可
TextField(
controller: controller.textEditingController,
style: TextStyle(color: const Color(0xff333333), fontSize: 14.px),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 0,top: 0),
hintText: '请输入...',
hintStyle: TextStyle(color: const Color(0xFFC8C9CC), fontSize: 14.px),
border: const OutlineInputBorder( // 重点
borderSide: BorderSide(
color: Colors.transparent,
),
),
enabledBorder: const OutlineInputBorder( // 重点
borderSide: BorderSide(
color: Colors.transparent,
),
),
disabledBorder: const OutlineInputBorder( // 重点
borderSide: BorderSide(
color: Colors.transparent,
),
),
focusedBorder: const OutlineInputBorder( // 重点
borderSide: BorderSide(
color: Colors.transparent,
),
),
suffixIcon: controller.textEditingController.text.isNotEmpty
? IconButton(
icon: const Icon(
Icons.cancel,size: 16, ),
onPressed: () {
controller.textEditingController.text = '';
},
) : null),
)
网友评论