Flutter組件學習（三）—— 輸入框TextFiled

序言

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

TextFiled組件的API

先來看一下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 組件的時候已經講過的，接下來咱們一個一個來看這些屬性：

一、controller

根據字面意思咱們就能夠知道，這是一個控制器，毫無疑問固然是控制 TextField 組件的了，用處有不少，能夠監聽輸入框的輸入（經過controller.addListener()），能夠獲取輸入框的值，能夠設置輸入框的值等等。

TextEditingController _textEditingController = new TextEditingController();

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

二、focusNode

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

FocusNode _focusNode = new FocusNode();

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

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

new TextField(
  focusNode: _focusNode,
)

三、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,
    ),
  ),
)

四、keyboardType

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

• text 輸入文字
• multiline 輸入文字
• number 輸入文字
• phone 輸入文字
• datetime 輸入文字
• emailAddress 輸入文字
• url

new TextField(
  keyboardType: TextInputType.number,
)

五、obscureText

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

六、textInputAction

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

• TextInputAction.done：完成按鈕
• TextInputAction.go：根據用戶輸入進行下一步按鈕
• TextInputAction.newline：換行按鈕
• TextInputAction.next：下一步按鈕
• TextInputAction.previous：上一步按鈕
• TextInputAction.search：搜索按鈕
• TextInputAction.send：發送按鈕

你們能夠手動試試各個枚舉值的效果。

七、TextCapitalization

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

• TextCapitalization.words：輸入的每一個單詞的首字母大寫（用空格隔開的單詞）
• TextCapitalization.characters：輸入的內容所有都大寫
• TextCapitalization.sentences：輸入的內容首字母大寫
• TextCapitalization.none：默認狀況，什麼都不設置

八、onChanged

這個屬性用來監聽輸入框的輸入，相似Android的TextWatch，可是它只有輸入後的值：

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

九、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等技術；在這裏你能獲得的不止是技術上的提高，還有一些學習經驗以及志同道合的朋友，趕快加入咱們，一塊兒學習，一塊兒進化吧！！！