【Flutter 2-5】Flutter——TextField使用、InputDecoration和FocusedNode 詳情 - flutter,dart,移動app,跨平台,ios 弗拉德博客

TextField

TextField是一個常用的控件，同時它也是一個組合控件，由多個控件組合而成。
這是來自Material官方網站的的圖片
2021_01_07_material_textfield
TextField是由7個控件組成，其中有些控件默認不顯示，我們可以對各個控件單獨設置想要的樣式來滿足不同的UI展示需求。
下面我們就來列舉幾種常見的樣式：

1. 簡單的TextField

TextField(
    decoration: InputDecoration(
        labelText: "最基本的的TextField",
    ),
)

TextField接收一個InputDecoration作為參數，InputDecoration初始化的參數labelText可以幫助我們定義placeholder。labelText模式會灰色的，選中之後會變為藍色，並且TextField底部會有一條藍色線條。
2020_01_08_textfield_custom

2. 限制字符的長度

TextField(
    maxLength: 10,
    decoration: InputDecoration(
        labelText: "最多10個字符",
    ),
)

maxLength可以設置最長字符個數，如果超過這個限制再次輸入不會有顯示，並且在TextField在有右下角有當前字符個數的標記，此處是10/10。
2020_01_08_textfield_maxlength

3. 限制行數

TextField(
    maxLines: 2,
    decoration: InputDecoration(
        labelText: "兩行文字，超出的文字上翻",
    ),
)

maxLines參數可以設置行數，比如這裏設置的是2，默認只會顯示兩行，超過兩行的部分只能通過上下滾動來顯示。
2020_01_08_textfield_maxline

默認行數是1，超過的部分會往左縮進。

4. labelText設置顏色

TextField(
    decoration: InputDecoration(
        labelText: "labelText 有顏色",
        labelStyle: TextStyle(color: Colors.red),
    ),
)

InputDecoration可以設置labelStyle參數，接收一個TextStyle對象，TextStyle這個我們比較熟悉，在之前講解Text的文章中已經做了很多詳解了。設置顏色之後，當點擊TextField之後，文字會變小，顏色也是設置好的顏色。
2020_01_08_textfield_labelcolor

5. 左側Icon

TextField(
    decoration: InputDecoration(
        icon: Icon(Icons.account_box),
        labelText: "左側有一個Icon",
    ),
)

icon參數可以傳入一個Icon對象用來顯示在TextField的左側，我們可以傳入各式各樣的Icon，滿足我們更豐富的展示需求。
2020_01_08_textfield_lefticon

6. 右側Icon suffix和suffixIcon

TextField(
    decoration: InputDecoration(
        labelText: "右側的兩個Icon suffix 和 suffixIcon",
        suffix: Icon(Icons.account_box),
        suffixIcon: Icon(Icons.add),
    ),
)

suffixIcon默認是顯示在右側的，TextField被點擊之後會顯示為被選中狀態，suffix默認不顯示，只有當選中TextField的時候才會顯示出來。
2020_01_08_textfield_suffix

7. 輔助提示

TextField(
    decoration: InputDecoration(
        labelText: "下方帶有輔助提示的TextField",
        helperText: "我是輔助提示",
        helperStyle: TextStyle(color: Colors.red),
    ),
)

helperText可以幫助我們在TextField下面顯示一行提示文字，同樣我們也可以使用helperStyle來設置這段提示文字的樣式。
2020_01_08_textfield_helpertext

8. 點擊後的提示 hintText

TextField(
    decoration: InputDecoration(
        labelText: "點擊後會有提示",
        hintText: "我是點擊後的提示",
        hintStyle: TextStyle(color: Colors.red),
    ),
)

hintText參數可以幫助我們設置一個點擊後顯示的文字，只有點擊之後才可以顯示，同樣我們可以通過hintStyle來設置hintText的樣式。
2020_01_08_textfield_hittext

9. 不顯示下劃線

TextField(
    decoration: InputDecoration(
        labelText: "選中時沒有下劃線",
        focusedBorder: InputBorder.none,
    ),
)

focusedBorder可以幫助我們設置下劃線的樣式，如果傳入InputBorder.none則不會顯示下劃線。
2020_01_08_textfield_focusborder

10. 自定義下劃線樣式

TextField(
    decoration: InputDecoration(
        labelText: "選中時的下劃線顏色",
        focusedBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.red),
        ),
    ),
)

我們可以給focusedBorder傳入自定義的UnderlineInputBorder來自定義下劃線的樣式，這裏我們簡單做了個顏色的改變。
2020_01_08_textfield_focusborder_color

TextField事件監聽

日常開發中，我們往往希望在三個地方TextField可以給我們回調。

輸入文字的過程中，這樣方便我們在用户輸入的時候就可以判斷輸入內容是否合法。
輸入完成的時候，這個時候我們可以拿到輸入內容做一些操作。
與鍵盤事件的配合，在必要的時候回收鍵盤。

TextField提供了三個回調方法

onChanged 此方法是在輸入有變化的時候就會回調。參數是當前已經輸入的內容
onSubmitted 此方法是在我們輸入完成後，點擊鍵盤上回車的時候回調。參數是當前的已經輸入的內容
onEditingComplete此方法也是在點擊鍵盤上回車的時候回調，它會在onSubmitted之前執行。不會帶有參數

需要注意是onEditingComplete回調方法沒有攜帶參數。如果我們需要在onEditingComplete方法中獲取到當前的輸入值。
那就需要通過TextEditingController來捕捉輸入內容，TextField接收一個TextEditingController對象來作為controller參數，
通過TextEditingController的屬性text我們也可以獲取到當前的輸入內容。

11. 事件回調

TextEditingController controller = TextEditingController();
TextField(
    controller: controller,
    onChanged: (value) {
      print("onChanged value = " + value);
    },
    onSubmitted: (value) {
      print("onSubmitted value = " + value);
    },
    onEditingComplete: () {
      print("onEditingComplete value = " + controller.text);
    },
    decoration: InputDecoration(
      labelText: "輸入事件監聽",
    ),
)

可以看到通過controller.text可以獲取到當前的輸入內容。
12. 鍵盤迴收

TextField(
    decoration: InputDecoration(
        labelText: "鍵盤迴收",
        suffixIcon: IconButton(
            icon: Icon(Icons.close),
            onPressed: () {
                FocusScope.of(context).requestFocus(FocusNode());
            }),
        ),
    )

FocusNode可以幫助我們進行鍵盤的回收，我只需要將FocusScope的requestFocus方法中傳入一個新的FocusNode對象即刻。
如果在開發過程中，我們希望通過點擊頁面上某個按鈕來結束TextField輸入並且獲取到當前的輸入內容。使用FocusNode是很有效的。
2020_01_08_textfield_focusbnode