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,  //最大行數(shù)
    this.minLines, //最小行數(shù)
    this.expands = false, //
    this.maxLength,  // 最多輸入數(shù),有值后右下角就會有一個計數(shù)器
    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以保存和恢復文本字段的狀態(tài)。

當我們使用border得時候,發(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( // 重點
   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),
    )
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容