【Flutter 2-5】Flutter——TextField使用、InputDecoration和FocusedNode

TextField

TextField是一個經常使用的控件，同時它也是一個組合控件，由多個控件組合而成。
這是來自Material官方網站的的圖片

TextField是由7個控件組成，其中有些控件默認不顯示，咱們能夠對各個控件單獨設置想要的樣式來知足不一樣的UI展現需求。
下面咱們就來列舉幾種常見的樣式：

1. 簡單的TextField

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

TextField接收一個InputDecoration做爲參數，InputDecoration初始化的參數labelText能夠幫助咱們定義placeholder。labelText模式會灰色的，選中以後會變爲藍色，而且TextField底部會有一條藍色線條。

2. 限制字符的長度

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

maxLength能夠設置最長字符個數，若是超過這個限制再次輸入不會有顯示，而且在TextField在有右下角有當前字符個數的標記，此處是10/10。

3. 限制行數

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

maxLines參數能夠設置行數，好比這裏設置的是2，默認只會顯示兩行，超過兩行的部分只能經過上下滾動來顯示。

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

4. labelText設置顏色

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

InputDecoration能夠設置labelStyle參數，接收一個TextStyle對象，TextStyle這個咱們比較熟悉，在以前講解Text的文章中已經作了不少詳解了。設置顏色以後，當點擊TextField以後，文字會變小，顏色也是設置好的顏色。

5. 左側Icon

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

icon參數能夠傳入一個Icon對象用來顯示在TextField的左側，咱們能夠傳入各式各樣的Icon，知足咱們更豐富的展現需求。

6. 右側Icon suffix和suffixIcon

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

suffixIcon默認是顯示在右側的，TextField被點擊以後會顯示爲被選中狀態，suffix默認不顯示，只有當選中TextField的時候纔會顯示出來。

7. 輔助提示

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

helperText能夠幫助咱們在TextField下面顯示一行提示文字，一樣咱們也能夠使用helperStyle來設置這段提示文字的樣式。

8. 點擊後的提示 hintText

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

hintText參數能夠幫助咱們設置一個點擊後顯示的文字，只有點擊以後才能夠顯示，一樣咱們能夠經過hintStyle來設置hintText的樣式。

9. 不顯示下劃線

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

focusedBorder能夠幫助咱們設置下劃線的樣式，若是傳入InputBorder.none則不會顯示下劃線。

10. 自定義下劃線樣式

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

咱們能夠給focusedBorder傳入自定義的UnderlineInputBorder來自定義下劃線的樣式，這裏咱們簡單作了個顏色的改變。

TextField事件監聽

平常開發中，咱們每每但願在三個地方TextField能夠給咱們回調。

1. 輸入文字的過程當中，這樣方便咱們在用戶輸入的時候就能夠判斷輸入內容是否合法。
2. 輸入完成的時候，這個時候咱們能夠拿到輸入內容作一些操做。
3. 與鍵盤事件的配合，在必要的時候回收鍵盤。

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是頗有效的。

想體驗以上的示例的運行效果，能夠到個人Github倉庫項目flutter_app->lib->routes->textfield_page.dart查看，而且能夠下載下來運行並體驗。

---