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

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

先來看一下TextFiled的構(gòu)造方法：

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 組件的時(shí)候已經(jīng)講過的，接下來我們一個(gè)一個(gè)來看這些屬性：

1、controller

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

TextEditingController _textEditingController = new TextEditingController();

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

2、focusNode

這個(gè)屬性可以用來監(jiān)聽輸入框是否獲?。ㄊィ┙裹c(diǎn)：

FocusNode _focusNode = new FocusNode();

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

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

new TextField(
  focusNode: _focusNode,
)

3、decoration

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

const InputDecoration({
  this.icon,  //輸入框前面的圖片（在下劃線外面）
  this.labelText,  //頂部提示文字（獲取焦點(diǎn)之后會(huì)移動(dòng)到輸入框上方）
  this.labelStyle,
  this.helperText,  //底部提示文字（不會(huì)移動(dòng)）
  this.helperStyle,
  this.hintText,  //占位文字
  this.hintStyle,
  this.errorText,  //類似helperText
  this.errorStyle,
  this.errorMaxLines,
  this.hasFloatingPlaceholder = true,
  this.isDense,
  this.contentPadding,  //輸入內(nèi)容的邊距，默認(rèn)有一個(gè)邊距，可以手動(dòng)設(shè)置
  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,   //輸入框邊框線（默認(rèn)是下劃線，也可以是none，也可以是一個(gè)框）
  this.enabled = true,
  this.semanticCounterText,
})

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

4、keyboardType

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

text 輸入文字

multiline 輸入文字

number 輸入文字

phone 輸入文字

datetime 輸入文字

emailAddress 輸入文字

url

new TextField(
  keyboardType: TextInputType.number,
)

5、obscureText

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

6、textInputAction

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

TextInputAction.done：完成按鈕

TextInputAction.go：根據(jù)用戶輸入進(jìn)行下一步按鈕

TextInputAction.newline：換行按鈕

TextInputAction.next：下一步按鈕

TextInputAction.previous：上一步按鈕

TextInputAction.search：搜索按鈕

TextInputAction.send：發(fā)送按鈕

大家可以手動(dòng)試試各個(gè)枚舉值的效果。

7、TextCapitalization

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

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

TextCapitalization.characters：輸入的內(nèi)容全部都大寫

TextCapitalization.sentences：輸入的內(nèi)容首字母大寫

TextCapitalization.none：默認(rèn)情況，什么都不設(shè)置

8、onChanged

這個(gè)屬性用來監(jiān)聽輸入框的輸入，類似Android的TextWatch，但是它只有輸入后的值：

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

9、cursorWidth、cursorRadius、cursorColor

這幾個(gè)屬性用來設(shè)置輸入時(shí)候的光標(biāo)。

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

代碼已上傳至Github

歡迎關(guān)注我的個(gè)人公眾號(hào)【IT先森養(yǎng)成記】，專注大前端技術(shù)分享，包含Android，Java，Kotlin，F(xiàn)lutter，HTML，CSS，JS等技術(shù)；在這里你能得到的不止是技術(shù)上的提升，還有一些學(xué)習(xí)經(jīng)驗(yàn)以及志同道合的朋友，趕快加入我們，一起學(xué)習(xí)，一起進(jìn)化吧?。?！