Flutter TextField 字体不居中问题

属性介绍

 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),
    )

你可能感兴趣的:(Flutter TextField 字体不居中问题)