一胸遇、Flutter中TextField控件在使用的時候在設置邊框InputBorder
Flutter中TextField控件在使用的時候在設置邊框時有如下幾種：
- InputBorder? errorBorder：在InputDecorate沒有焦點顯示錯誤的時候使用
- InputBorder? focusedBorder：在InputDecorate有焦點且不顯示錯誤的時候使用
- InputBorder? focusedErrorBorder：在InputDecorate有焦點且顯示錯誤的時候使用
- InputBorder? disabledBorder：在InputDecorate不能使用且不顯示錯誤的時候使用
- InputBorder? enabledBorder：在InputDecorate能使用且不顯示錯誤的時候使用
- InputBorder? border：在輸入框上繪制
不同狀態(tài)下的邊框樣式，他們接收值的類型都一樣，不過需要注意優(yōu)先級。
大致分為以下幾種情況
控件禁用時當enabled為false時，如果指定了disabledBorder，優(yōu)先使用disabledBorder，沒有的話設置disabledBorder則使用border的部分樣式（顏色默認是灰色）
控件啟用(enable為true)呆奕，但errorText有值輸入框沒有焦點時，優(yōu)先使用errorBorder的樣式衬吆，輸入框有焦點時梁钾，優(yōu)先使用focusedErrorBorder，如果這兩個都沒有設置則使用border的部分樣式（顏色默認是紅色）
控件啟用狀態(tài)咆槽，且errorText沒有值輸入框沒有焦點時陈轿，優(yōu)先使用enabledBorder ，有焦點時秦忿，優(yōu)先使用focusedBorder麦射，兩者均沒有指定時，使用默認的border
總體來說灯谣，默認的border優(yōu)先級別較低潜秋。
建議：
- 在開發(fā)過程中我們如果需要errorText的話，我們只需要設置 errorBorder胎许、focusedErrorBorder這三個即可峻呛。不需要errorText的話
- 不需要errorText的話罗售，只需要設置enabledBorder 、focusedBorder
// 1. 控件禁用時 當enabled為false時钩述，如果指定了disabledBorder寨躁，優(yōu)先使用disabledBorder，
// 沒有的話設置disabledBorder則使用border的部分樣式（顏色默認是灰色）
enabled: false,
disabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
// 2. 控件啟用(enable為true)牙勘，但errorText有值輸入框沒有焦點時职恳，優(yōu)先使用errorBorder的樣式，
// 輸入框有焦點時方面，優(yōu)先使用focusedErrorBorder放钦，如果這兩個都沒有設置則使用border的部分樣式（顏色默認是紅色）
errorText: '出錯了',
errorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
focusedErrorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.green),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
// 3、控件啟用狀態(tài)恭金，且errorText沒有值輸入框沒有焦點時操禀，優(yōu)先使用enabledBorder ，
// 有焦點時横腿，優(yōu)先使用focusedBorder颓屑，兩者均沒有指定時，使用默認的border
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.yellow),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.green),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
// 隱藏下劃線
// border: InputBorder.none,
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
二蔑水、Flutter中使用TextField控件中的事件
- final ValueChanged<String>? onChanged;
- final VoidCallback? onEditingComplete;
- final ValueChanged<String>? onSubmitted;
- final GestureTapCallback? onTap;
TextField(
decoration: InputDecoration(
hintText: hintText,
// 隱藏下劃線
border: InputBorder.none,
// 顏色填充
// filled: true,
// fillColor: Colors.cyan,
),
// 輸入文本發(fā)生變化時的回調邢锯，參數即為輸入框中的值
onChanged: (value) {
print(value)
},
// 點擊鍵盤的動作按鈕時的回調扬蕊，沒有參數搀别，注意這個方法使用后點擊鍵盤上的動作按鈕就不會自動收起鍵盤了
onEditingComplete: () {
print('點擊了鍵盤上的動作按鈕！');
},
// 點擊鍵盤的動作按鈕時的回調尾抑，參數為當前輸入框中的值
onSubmitted: (value) {
print('當前輸入框中的值為：$value');
},
// 點擊輸入框的時候就觸發(fā)歇父，當設置了enabled: false的話則點擊無效
// enabled: false,
onTap: () {
print('點擊按鈕');
},
),
三、點擊空白 input 失去焦點
需要在頁面的Scaffold外層加如下代碼：
GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {
// 方式一：
FocusScope.of(context).requestFocus(FocusNode());
// 方式二：（與方式一的區(qū)別在于再愈，鍵盤收起后文本是否失去焦點）
SystemChannels.textInput.invokeMethod('TextInput.hide');
// 方式三：還可以將所有的FocusNode進行包裝整體進行取消
// unFocus();
},
child: Scaffold(
...
)
);
void unFocus() {
phoneFocusNode.unfocus();
passwordFocusNode.unfocus();
dateFocusNode.unfocus();
}
注意：
FocusScope.of(context).requestFocus(FocusNode());這種應該是獲取焦點的方式榜苫，當傳入具體的focusNode的話，該輸入框就會獲取焦點翎冲，彈出鍵盤垂睬，如果沒有具體指定，只是傳入一個FocusNode()的實例抗悍，會收起鍵盤驹饺，具體原因，需要查一下源碼缴渊，mark一下赏壹。
四、常用正則校驗
// 字母
RegExp letterReg = RegExp("[a-zA-Z]");
// 中文正則
RegExp chineseReg = RegExp("[\u4e00-\u9fa5]");
// 字母衔沼、數字和漢字正則
RegExp letterDigitChineseReg = RegExp("[a-zA-Z]|[\u4e00-\u9fa5]|[0-9]");
// emoji表情正則
RegExp emojiReg = RegExp(
"[^\\u0020-\\u007E\\u00A0-\\u00BE\\u2E80-\\uA4CF\\uF900-\\uFAFF\\uFE30-\\uFE4F\\uFF00-\\uFFEF\\u0080-\\u009F\\u2000-\\u201f\r\n]");
使用TextInputFormatter對輸入內容增加校驗：
// 用于限制輸入的內容蝌借，接收一個TextInputFormatter類型的集合
inputFormatters: [
// 白名單設置昔瞧，只允許輸入小寫的a-z
// FilteringTextInputFormatter.allow(RegExp("[a-z]")),
// 黑名單設置，不允許輸入emoji表情和中文
FilteringTextInputFormatter.deny(emojiReg),
FilteringTextInputFormatter.deny(chineseReg),
// 只允許輸入數字
// FilteringTextInputFormatter.digitsOnly,
// FilteringTextInputFormatter.singleLineFormatter,
// LengthLimitingTextInputFormatter(5)
],
