美文网首页
Flutter TextField 字体不居中问题

Flutter TextField 字体不居中问题

作者: 嗯o哼 | 来源:发表于2022-08-17 18:35 被阅读0次

    属性介绍

     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 字体不居中问题

          本文链接:https://www.haomeiwen.com/subject/svfsgrtx.html