Flutter TextField 字體不居中問題

屬性介紹

 const TextField({
    Key key,
    this.controller, //文本控制器
    this.focusNode, //焦點(diǎn)控制
    this.decoration = const InputDecoration(), //邊框裝飾
    TextInputType keyboardType, // 鍵盤類型
    this.textInputAction, //鍵盤的操作按鈕
    this.textCapitalization = TextCapitalization.none, //用戶輸入類型
    this.style, //輸入文本樣式
    this.strutStyle,
    this.textAlign = TextAlign.start, //水平方向?qū)R方式。  值為  left、  right  、center、  justify 、 start、  end
    this.textAlignVertical, // 文本垂直方向?qū)R方式 。 值為 top   、 center 、  bottom
    this.textDirection,   //文本方向  rtl(right to left)   ltr(left to right)
    this.readOnly = false,
    ToolbarOptions toolbarOptions,   //工具欄選項(xiàng)的配置
    this.showCursor,    //是否顯示光標(biāo)
    this.autofocus = false,   //自動(dòng)獲取焦點(diǎn)
    this.obscuringCharacter = '?',    //隱藏內(nèi)容時(shí),顯示的文字
    this.obscureText = false,  //  是否隱藏內(nèi)容,例如密碼格式
    this.autocorrect = true,  //是否自動(dòng)校正
    SmartDashesType smartDashesType,   //指示如何處理文本輸入中破折號的智能替換
    SmartQuotesType smartQuotesType,  //指示如何處理文本輸入中引號的智能替換。
    this.enableSuggestions = true,  //啟用建議
    this.maxLines = 1,  //最大行數(shù)
    this.minLines, //最小行數(shù)
    this.expands = false, //
    this.maxLength,  // 最多輸入數(shù),有值后右下角就會(huì)有一個(gè)計(jì)數(shù)器
    this.maxLengthEnforced = true, //是否允許超過輸入最大長度
    this.onChanged, // 文本內(nèi)容變更時(shí)回調(diào)
    this.onEditingComplete,    // 輸入完成回調(diào) 主要配合TextInputAction.done使用
    this.onSubmitted,  //提交 配合TextInputAction
    this.onAppPrivateCommand,
    this.inputFormatters,   //輸入校驗(yàn)
    this.enabled,  //是否可用
    this.cursorWidth = 2.0, // 光標(biāo)寬度
    this.cursorHeight, //光標(biāo)高度
    this.cursorRadius, //光標(biāo)圓角
    this.cursorColor, //光標(biāo)顏色
    this.selectionHeightStyle = ui.BoxHeightStyle.tight,
    this.selectionWidthStyle = ui.BoxWidthStyle.tight,
    this.keyboardAppearance,   // 鍵盤亮度
    this.scrollPadding = const EdgeInsets.all(20.0),  // 滾動(dòng)到視圖中時(shí),填充邊距
    this.dragStartBehavior = DragStartBehavior.start,
    this.enableInteractiveSelection = true,    // 長按是否展示 剪切/復(fù)制/粘貼菜單
    this.onTap,  //點(diǎn)擊事件
    this.mouseCursor, // 鼠標(biāo)指針進(jìn)入或懸停在鼠標(biāo)指針上時(shí)的光標(biāo)
    this.buildCounter,
    this.scrollController,  //控制可滾動(dòng)的小部件
    this.scrollPhysics, //確定[Scrollable]小部件的物理性質(zhì)。
    this.autofillHints,//自動(dòng)填充提示
    this.restorationId, //恢復(fù)ID以保存和恢復(fù)文本字段的狀態(tài)。

當(dāng)我們使用border得時(shí)候,發(fā)現(xiàn),文字是正常的,而去除了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( // 重點(diǎn)
   borderSide: BorderSide(
    color: Colors.transparent,
   ),
  ),
  enabledBorder: const OutlineInputBorder( // 重點(diǎn)
   borderSide: BorderSide(
   color: Colors.transparent,
   ),
  ),
  disabledBorder: const OutlineInputBorder( // 重點(diǎn)
  borderSide: BorderSide(
    color: Colors.transparent,
    ),
  ),
   focusedBorder: const OutlineInputBorder( // 重點(diǎn)
   borderSide: BorderSide(
    color: Colors.transparent,
  ),
  ),
  suffixIcon: controller.textEditingController.text.isNotEmpty
  ? IconButton(
  icon: const Icon(
  Icons.cancel,size: 16,  ),
  onPressed: () {
    controller.textEditingController.text = '';
    },
     )   : null),
    )
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容