屬性介紹
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),
)