Flutter進階：深入探究 TextField

TextField 介紹

TextField 組件可以讓用戶填寫信息。實現 TextField 的代碼非常簡單：

TextField()

從TextField中檢索信息

由於 TextFields 組件沒有像 Android 中那樣的 ID，因此無法根據需要檢索文本，而必須在更改時將其存儲在變量中或使用控制器。

最簡單的方法是使用 onChanged 方法並將當前值存儲在一個變量中。示例代碼如下：
```
String value = "";
TextField(
  onChanged: (text) {
    value = text;
  },
)
```

第二種方法是使用 TextEditingController 。控制器連接到 TextField ，讓我們也可以監聽和控制 TextField 的內容。

TextEditingController controller = TextEditingController();
TextField(
  controller: controller,
)

我們可以這樣監聽變化

controller.addListener(() {
  // Do something here
});

獲取、設置文本內容：

print(controller.text); // Print current value
controller.text = "Demo Text"; // Set new value

TextField 中其他的回調

TextField 組件還提供其他回調，例如：

onEditingCompleted
onSubmitted

onEditingComplete: () {},
onSubmitted: (value) {},

這些是在用戶單擊 iOS 上的“完成”按鈕時調用的回調。

在 TextField 中使用焦點

在 TextField 上“聚焦”意味着激活 TextField ，鍵盤的任何輸入都將導致在聚焦的 TextField 中輸入數據。

1. 使其自動聚焦

要在創建窗口時在 TextField 上自動對焦，請將自動對焦字段設置爲 true 。

TextField(
  autofocus: true,
),

默認情況下，這會將焦點設置在 TextField 上。

2.自定義更改焦點

如果我們想要改變焦點而不僅僅是自動對焦怎麼辦？看下面代碼，我們將 FocusNode 附加到 TextField 並使用它來切換焦點。

// Initialise outside the build method
FocusNode nodeOne = FocusNode();
FocusNode nodeTwo = FocusNode();
// Do this inside the build method
TextField(
  focusNode: nodeOne,
),
TextField(
  focusNode: nodeTwo,
),
RaisedButton(
  onPressed: () {
    FocusScope.of(context).requestFocus(nodeTwo);
  },
  child: Text("Next Field"),
),

我們創建兩個焦點節點並將它們附加到 TextFields 。按下按鈕時，我們使用 FocusScope 請求焦點到下一個TextField。

更改 TextFields 的鍵盤屬性

Flutter 中的 TextField 允許我們自定義與鍵盤相關的屬性。

1.鍵盤類型

TextField 允許您自定義在 TextField 成爲焦點時顯示的鍵盤類型。我們更改 keyboardType 屬性。

TextField(
  keyboardType: TextInputType.number,
),

類型有：

TextInputType.text (普通全鍵盤)
TextInputType.number (數字鍵盤)
TextInputType.emailAddress (普通鍵盤，帶有“@”符號)
TextInputType.datetime (數字鍵盤，帶有 “/” 和 “:” 符號)
TextInputType.multiline (數字鍵盤，帶有啓用有符號和十進制模式的選項)

2.TextInputAction

更改 TextField 的 textInputAction 可以更改鍵盤本身的操作按鈕。

例如：

TextField(
  textInputAction: TextInputAction.continueAction,
),

這會導致 “Done” 按鈕被 “Continue” 按鈕替換：

或者：

TextField(
  textInputAction: TextInputAction.send,
),

還有很多類型，這裏不一一列舉。

3.自動更正

啓用或禁用特定 TextField 的自動更正。使用自動更正字段進行如下設置。

TextField(
  autocorrect: false,
),

這將禁用更正。

4.文本大寫

TextField 提供了一些有關如何使用戶輸入中的字母大寫的選項。

TextField(
  textCapitalization: TextCapitalization.sentences,
),

選項有：：

TextCapitalization.sentences

這可以使每個句子的首字母大寫。
TextCapitalization.characters

大寫句子中的所有字符。
TextCapitalization.words

大寫每個單詞的首字母。

Text Style, Alignment 和 Cursor

Flutter 允許自定義 TextField 內的文本樣式和對齊方式以及 TextField 內的光標。

TextField 內的文本對齊方式

使用 textAlign 屬性調整 TextField 中光標的位置。

TextField(
  textAlign: TextAlign.center,
),

通常的對齊屬性有：start, end, left, right, center, justify.

在 TextField 中設置文本樣式

我們使用 style 屬性來更改 TextField 內部文本的樣式。使用它來更改顏色，字體大小等。這類似於文本組件中的樣式屬性，這裏我們不多做介紹。

TextField(
  style: TextStyle(color: Colors.red, fontWeight: FontWeight.w300),
),

更改 TextField 中的光標

可以直接自定義 TextField 組件的光標。

您可以更改光標顏色，寬度和半徑。例如，在這裏我自定義了一個圓形紅色光標。

TextField(
  cursorColor: Colors.red,
  cursorRadius: Radius.circular(16.0),
  cursorWidth: 16.0,
),

控制 TextField 中的大小和最大長度

TextFields 可以控制其中寫入的最大字符數、最大行數並在鍵入文本時展開。

控制最大字符數

TextField(
  maxLength: 4,
),

通過設置 maxLength 屬性，將強制執行最大長度，並且默認情況下會將計數器添加到 TextField 。

製作可擴展的TextField

有時，我們需要 TextField 當一行完成時會擴展。在Flutter中，做法有點奇怪（但很容易）。我們將 maxLines 設置爲 null ，默認爲1。

注意：默認情況下，將 maxLines 設置爲直接值會將其自動擴展爲該行數。

TextField(
  maxLines: 3,
)

模糊文字

要隱藏 TextField 中的文本，請將 obscureText 設置爲true 。

TextField(
  obscureText: true,
),

裝飾 TextField

至此，我們專注於 Flutter 提供的輸入功能。現在我們來實際設計一個漂亮的 TextField 。

爲了裝飾 TextField，我們使用了帶有 InputDecoration 的 decoration 屬性。由於 InputDecoration 類非常龐大，我們快速過一遍它的重要屬性。

使用提示和標籤屬性向用戶提供信息

提示和標籤都是字符串，可幫助用戶理解要在 TextField 中輸入的信息。不同之處在於，當標籤浮動在 TextField上時，一旦用戶開始輸入，提示就會消失。

您可以使用 “icon”，“prefixIcon” 和 “suffixIcon” 添加圖標

您可以直接向 TextFields 添加圖標。您也可以使用 prefixText 和 suffixText 代替 Text。

TextField(
  decoration: InputDecoration(
    icon: Icon(Icons.print)
  ),
),

TextField(
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.print)
  ),
),

對於其他任何組件，使用 “prefix” 而不是 “prefixIcon”

要使用通用組件而不是僅僅一個圖標，請使用 prefix field 。讓我們在 TextField 中添加一個圓形進度框。

TextField(
  decoration: InputDecoration(
    prefix: CircularProgressIndicator(),
  ),
),

像 hint ，label 等每個屬性都有各自的樣式字段

TextField(
  decoration: InputDecoration(
    hintText: "Demo Text",
    hintStyle: TextStyle(fontWeight: FontWeight.w300, color: Colors.red)
  ),
),

注意：雖然我在此示例中這樣操作，但通常不會更改提示顏色。

如果您不想要標籤而想要爲用戶提供持久消息，請使用 “helperText” 。

TextField(
  decoration: InputDecoration(
    helperText: "Hello"
  ),
),

使用 “decoration：null” 或 InputDecoration.collapsed 刪除 TextField 上的默認下劃線

使用這些刪除 TextField 上的默認下劃線。

TextField(
  decoration: InputDecoration.collapsed(hintText: "")
),

使用 “border” 爲 TextField 設置邊框

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder()
  )
),

您可以進一步做大量的裝飾，我不可能將所有你需要的樣式做出來。但我希望這我已經讓你知道怎麼將它做出來！

最後

利用時間整理分析自己所學的知識是件非常有意義的事情，希望這也能幫到其他正在學習的同學。同時我也正在用Flutter寫幾個項目，寫好之後就會開源給大家。

Github：https://github.com/MeandNi

微信：yangjk128

原文博客：https://meandni.com/2019/01/26/1be6/

歡迎一起交流移動開發的技術！

參考鏈接

原英文博客

官方文檔