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.textAlign = TextAlign.start,   // 對齊方式
    this.textDirection,                 // 文本方向
    this.autofocus = false,             // 是否自動對焦
    this.obscureText = false,           // 是否隱藏內容碍沐，例如密碼格式
    this.autocorrect = true,            // 是否自動校正
    this.maxLines = 1,                  // 最大行數(shù)
    this.maxLength,                     // 允許輸入的最大長度
    this.maxLengthEnforced = true,      // 是否允許超過輸入最大長度
    this.onChanged,                     // 文本內容變更時回調
    this.onEditingComplete,             // 提交內容時回調
    this.onSubmitted,                   // 用戶提示完成時回調
    this.inputFormatters,               // 驗證及格式
    this.enabled,                       // 是否不可點擊
    this.cursorWidth = 2.0,             // 光標寬度
    this.cursorRadius,                  // 光標圓角弧度
    this.cursorColor,                   // 光標顏色
    this.keyboardAppearance,            // 鍵盤亮度
    this.scrollPadding = const EdgeInsets.all(20.0),        // 滾動到視圖中時，填充邊距
    this.enableInteractiveSelection,    // 長按是否展示【剪切/復制/粘貼菜單LengthLimitingTextInputFormatter】
    this.onTap,                         // 點擊時回調
})

分析源碼可得衷蜓，TextField 是有狀態(tài) StatefulWidget累提，有豐富的屬性，自定義化較高恍箭，實踐中需要合理利用各種回調刻恭；

1、光標的相關屬性扯夭；cursorColor 為光標顏色鳍贾，cursorWidth 為光標寬度，cursorRadius 為光標圓角交洗；其中 Radius 提供了 circle 圓角和 elliptical 非圓角兩種骑科；

return TextField(cursorColor: Colors.purple.withOpacity(0.4), cursorWidth: 10.0, cursorRadius: Radius.circular(4.0));

2、textAlign 為文字起始位置构拳，可根據(jù)業(yè)務光標居左/居右/居中等咆爽；注意只是文字開始方向；textDirection 問文字內容方向置森，從左向右或從右向左斗埂；

return TextField(style: TextStyle(color: Colors.purple.withOpacity(0.7), fontSize: 18.0), textAlign: TextAlign.right);

3、maxLength 為字符長度凫海，設置時默認是展示一行呛凶，且右下角有編輯長度與整體長度對比；與 maxLengthEnforced 配合行贪，maxLengthEnforced 為 true 時達到最大字符長度后不可編輯漾稀；為 false 時可繼續(xù)編輯展示有差別；

return TextField(maxLength: 30, maxLengthEnforced: true);
return TextField(maxLength: 30, maxLengthEnforced: false);

4建瘫、設置 maxLength 之后右下角默認有字符計數(shù)器崭捍，設置 TextField.noMaxLength 即可只展示輸入字符數(shù)；

return TextField(maxLength: TextField.noMaxLength);

5啰脚、maxLines 為允許展現(xiàn)的最大行數(shù)殷蛇，在使用 maxLength 時內容超過一行不會自動換行，因為默認 maxLines=1橄浓，此時設置為 null 或固定展示行數(shù)即可自動換行晾咪；區(qū)別在于 null 會展示多行，而 maxLines 最多只展示到設置行數(shù)贮配；

return TextField(maxLength: 130, maxLengthEnforced: false, maxLines: null);
return TextField(maxLength: 130, maxLengthEnforced: false, maxLines: 2);

6谍倦、obscureText 是否隱藏編輯內容，常見的密碼格式泪勒；

return TextField(obscureText: true);

7昼蛀、enableInteractiveSelection 長按是否出現(xiàn)【剪切/復制/粘貼】菜單宴猾；不可為空；

return TextField(enableInteractiveSelection: false);

8叼旋、keyboardAppearance 為鍵盤亮度仇哆，包括 Brightness.dark/light 兩種，但僅限于 iOS 設備夫植；

return TextField(keyboardAppearance: Brightness.dark);

9讹剔、textCapitalization 文字大小寫；理論上 sentences 為每句話第一個字母大寫详民；characters為每個字母大寫延欠；words 為每個單詞首字母大寫；但該屬性僅限于 text keybord沈跨，和尚在本地更換多種方式并未實現(xiàn)由捎，有待研究；

return TextField(textCapitalization: TextCapitalization.sentences);

10饿凛、keyboardType 為鍵盤類型狞玛，和尚理解整體分為數(shù)字鍵盤和字母鍵盤等；根據(jù)設置的鍵盤類型涧窒，鍵盤會有差別心肪；

a. 數(shù)字鍵盤
--1-- datetime 鍵盤上可隨時訪問 : 和 /；
--2-- phone 鍵盤上可隨時訪問 # 和 *纠吴；
--3-- number 鍵盤上可隨時訪問 + - * /

b. 字母鍵盤
--1-- emailAddress 鍵盤上可隨時訪問 @ 和 .硬鞍；
--2-- url 鍵盤上可隨時訪問 / 和 .；
--3-- multiline 適用于多行文本換行呜象；
--4-- text 默認字母鍵盤膳凝；

return TextField(keyboardType: TextInputType.number);
return TextField(keyboardType: TextInputType.emailAddress);

11碑隆、textInputAction 通常為鍵盤右下角操作類型恭陡，類型眾多，建議多多嘗試上煤；

return TextField(textInputAction: TextInputAction.search);

12休玩、autofocus 是否自動獲取焦點，進入頁面優(yōu)先獲取焦點劫狠，并彈出鍵盤拴疤，若頁面中有多個 TextField 設置 autofocus 為 true 則優(yōu)先獲取第一個焦點；

return TextField(autofocus: true);

13独泞、focusNode 手動獲取焦點呐矾，可配合鍵盤輸入等減少用戶操作次數(shù)，直接獲取下一個 TextField 焦點懦砂；

FocusScope.of(context).requestFocus(node);

return TextField(focusNode: node);

14蜒犯、enabled 設為 false 之后 TextField 為不可編輯狀態(tài)组橄；

return TextField(enabled: false);

15、decoration 為邊框修飾罚随，可以借此來調整 TextField 展示效果玉工；可以設置前置圖標，后置圖片淘菩，邊框屬性遵班，內容屬性等，會在后續(xù)集中嘗試潮改；若要完全刪除裝飾狭郑，將 decoration 設置為空即可；

return TextField(decoration: InputDecoration(icon: Icon(Icons.android)));

16进陡、inputFormatters 為格式驗證愿阐，例如原生 Android 中通常會限制輸入手機號或其他特殊字符，在 Flutter 中也可以借此來進行格式限制趾疚，包括正則表達式缨历；使用時需要引入 package:flutter/services.dart；

a. LengthLimitingTextInputFormatter 限制最長字符糙麦；

b. WhitelistingTextInputFormatter 僅允許輸入白名單中字符辛孵；如 digitsOnly 僅支持數(shù)字 [0-9]；

c. BlacklistingTextInputFormatter 防止輸入黑名單中字符赡磅；如 singleLineFormatter 強制輸入單行魄缚；
分析源碼 RegExp("[/]") 可以設置正則表達式；

return TextField(inputFormatters: <TextInputFormatter>[
  LengthLimitingTextInputFormatter(12),
  WhitelistingTextInputFormatter.digitsOnly,
  BlacklistingTextInputFormatter.singleLineFormatter
]);

17焚廊、onChanged 文本內容變更時回調冶匹，可實時監(jiān)聽 TextField 輸入內容；

Center(child: Text(_textStr))
return TextField(onChanged: (text) {
  setState(() {
    _textStr = text;
  });
});

18咆瘟、controller 文本控制器嚼隘，監(jiān)聽輸入內容回調；

TextEditingController controller = TextEditingController();

@override
void initState() {
  super.initState();
  controller.addListener(() {
    setState(() {
      _textStr = controller.text;
    });
  });
}

return TextField(controller: controller);

19袒餐、onTap 點擊 TextField時回調飞蛹；

return TextField(
  onTap: () {
    Toast.show('onTap!', context, duration: Toast.LENGTH_SHORT, gravity: Toast.TOP);
  },
);

20、onEditingComplete 在提交內容時回調灸眼，通常是點擊回車按鍵時回調卧檐；

return TextField(
  onEditingComplete: () {
    Toast.show('onEditingComplete!', context, duration: Toast.LENGTH_SHORT, gravity: Toast.CENTER);
  },
);

21、onSubmit 在提交時回調焰宣，不可與 onEditingComplete 同時使用霉囚，區(qū)別在于 onSubmit 是帶返回值的回調；

return TextField(
  onEditingComplete: () {
    Toast.show('onSubmitted -> $text!', context, duration: Toast.LENGTH_SHORT, gravity: Toast.CENTER);
  },
);

問題小結：

鍵盤彈出會把輸入框或其它組件頂上去匕积？

當 TextField 獲取焦點彈出輸入框時盈罐，輸入框可能會將頁面中元素頂上去逻澳，為避免此情況，可將 Scaffold 中 resizeToAvoidBottomPadding: false 即可暖呕，resizeToAvoidBottomPadding設置是否自動調整body屬性控件的大小斜做，以避免 Scaffold 底部被覆蓋；

resizeToAvoidBottomPadding: false

長按輸入框出現(xiàn)【剪切/復制/粘貼】的菜單如何設置中文湾揽？

當 TextField 設置 enableInteractiveSelection 屬性后長按會出現(xiàn)菜單瓤逼，默認為英文，可通過設置 Flutter 國際化來處理库物；

（1）在 pubspec.yaml 中集成 flutter_localizations霸旗；

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

2）在 MaterialApp 中設置本地化代理和支持的語言類型；

return MaterialApp(
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('zh', 'CN'),
    const Locale('en', 'US'),
  ]
}

使用 maxLength 時如何取消文本框右下角字符計數(shù)器戚揭？

（1）將 maxLength 設置為 null 僅使用 LengthLimitingTextInputFormatter 限制最長字符诱告；

return TextField(maxLength: null, inputFormatters: <TextInputFormatter>[
  LengthLimitingTextInputFormatter(10)
]);

（2）設置 InputDecoration 中 decoration 屬性為空；但是底部有空余民晒，只是隱藏而并非消失精居；

return TextField(decoration: InputDecoration(counterText: ""), maxLength: 10);