摘要：序言前兩天發布了正式版本，正式版發布之后，身邊越來越多的人都開始入坑了，不得不說框架的魅力還是很吸引人的哈，所以我們更要抓緊學習了之前我寫了兩篇文章來介紹中的組件和中的組件，今天我們繼續學習輸入框組件，話不多說，先上圖組件的先來看一下的構造

Google 前兩天發布了 Flutter 1.0 正式版本，正式版發布之后，LZ身邊越來越多的人都開始入坑了，不得不說 Flutter 框架的魅力還是很吸引人的哈，所以我們更要抓緊學習了；之前我寫了兩篇文章來介紹 Flutter中的Text組件 和 Flutter中的Image組件，今天我們繼續學習輸入框 TextFiled 組件，話不多說，先上圖：

先來看一下TextFiled的構造方法：

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,   //類似Text組件
  this.textDirection,   //類似Text組件
  this.autofocus = false,
  this.obscureText = false,
  this.autocorrect = true,
  this.maxLines = 1,
  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 = true,
  this.onTap,
})

哇，乍一看好多配置啊，別急大兄弟，有很多我們在講 Text 組件的時候已經講過的，接下來我們一個一個來看這些屬性：

1、controller

根據字面意思我們就可以知道，這是一個控制器，毫無疑問當然是控制 TextField 組件的了，用處有很多，可以監聽輸入框的輸入（通過controller.addListener()），可以獲取輸入框的值，可以設置輸入框的值等等。

TextEditingController _textEditingController = new TextEditingController();

new TextField(
  controller: _textEditingController,
),
new RaisedButton(
  onPressed: () {
    print(_textEditingController.text);
    _textEditingController.clear();
  },
  child: Text("清除"),
)

2、focusNode

這個屬性可以用來監聽輸入框是否獲取（失去）焦點：

FocusNode _focusNode = new FocusNode();

@override
void initState() {
  super.initState();
  _focusNode.addListener(_focusNodeListener);
}

Future _focusNodeListener() async {
  if (_focusNode.hasFocus) {
    print("獲取焦點");
  } else {
    print("失去焦點");
  }
}

new TextField(
  focusNode: _focusNode,
)

3、decoration

這個屬性用來設置輸入框的一些樣式，比如前后圖標，提示文字，錯誤文字，占位文字等等，下面來看一下可以設置的東西（有點多，大家可以有需要的時候再去挨個了解）：

const InputDecoration({
  this.icon,  //輸入框前面的圖片（在下劃線外面）
  this.labelText,  //頂部提示文字（獲取焦點之后會移動到輸入框上方）
  this.labelStyle,
  this.helperText,  //底部提示文字（不會移動）
  this.helperStyle,
  this.hintText,  //占位文字
  this.hintStyle,
  this.errorText,  //類似helperText
  this.errorStyle,
  this.errorMaxLines,
  this.hasFloatingPlaceholder = true,
  this.isDense,
  this.contentPadding,  //輸入內容的邊距，默認有一個邊距，可以手動設置
  this.prefixIcon, //輸入框前面的圖片（在下劃線里面）
  this.prefix,
  this.prefixText,
  this.prefixStyle,
  this.suffixIcon,  //輸入框后面的圖片（在下劃線里面）
  this.suffix,
  this.suffixText,
  this.suffixStyle,
  this.counterText,
  this.counterStyle,
  this.filled,
  this.fillColor,
  this.errorBorder,
  this.focusedBorder,
  this.focusedErrorBorder,
  this.disabledBorder,
  this.enabledBorder,
  this.border,   //輸入框邊框線（默認是下劃線，也可以是none，也可以是一個框）
  this.enabled = true,
  this.semanticCounterText,
})

new TextField(
  decoration: InputDecoration(
    labelText: "請輸入手機號",
    //設置輸入框前面有一個電話的按鈕 suffixIcon
    prefixIcon: Icon(Icons.phone),
    labelStyle: TextStyle(
      fontSize: 14,
      color: Colors.grey,
    ),
  ),
)

4、keyboardType

這個屬性是設置輸入框的輸入類型的，類似于 Android 中的 InputType，選值有以下幾個：

text 輸入文字

multiline 輸入文字

number 輸入文字

phone 輸入文字

datetime 輸入文字

emailAddress 輸入文字

url

new TextField(
  keyboardType: TextInputType.number,
)

5、obscureText

這個屬性用來控制顯示隱藏用戶輸入的內容（密文/明文顯示）。

6、textInputAction

這個屬性用來控制彈出的鍵盤中右下角的按鈕，這是一個枚舉值，有很多種形式（下面舉幾個例子）：

TextInputAction.done：完成按鈕

TextInputAction.go：根據用戶輸入進行下一步按鈕

TextInputAction.newline：換行按鈕

TextInputAction.next：下一步按鈕

TextInputAction.previous：上一步按鈕

TextInputAction.search：搜索按鈕

TextInputAction.send：發送按鈕

大家可以手動試試各個枚舉值的效果。

7、TextCapitalization

這個屬性用來控制輸入內容的大小寫設置，同樣是一個枚舉值，來看一下具體的值及效果：

TextCapitalization.words：輸入的每個單詞的首字母大寫（用空格隔開的單詞）

TextCapitalization.characters：輸入的內容全部都大寫

TextCapitalization.sentences：輸入的內容首字母大寫

TextCapitalization.none：默認情況，什么都不設置

8、onChanged

這個屬性用來監聽輸入框的輸入，類似Android的TextWatch，但是它只有輸入后的值：

new TextField(
  onChanged: (String content) {
    print("content--->$content");
  },
)

9、cursorWidth、cursorRadius、cursorColor

這幾個屬性用來設置輸入時候的光標。

new TextField(
  decoration: InputDecoration(
    hintText: "光標設置",
    hintStyle: TextStyle(
      fontSize: 14,
      color: Colors.grey,
    ),
  ),
  cursorColor: Colors.purple,
  cursorWidth: 6,
  cursorRadius: Radius.elliptical(2, 8),
)

代碼已上傳至Github

歡迎關注我的個人公眾號【IT先森養成記】，專注大前端技術分享，包含Android，Java，Kotlin，Flutter，HTML，CSS，JS等技術；在這里你能得到的不止是技術上的提升，還有一些學習經驗以及志同道合的朋友，趕快加入我們，一起學習，一起進化吧?。?！