Flutter進階：深入探究 TextField

Meandni發表於2019-01-26
Flutter

Flutter進階：深入探究 TextField

TextField 介紹

TextField 元件可以讓使用者填寫資訊。 實現 TextField 的程式碼非常簡單：

TextField()
複製程式碼

Flutter進階：深入探究 TextField

從TextField中檢索資訊

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

  1. 最簡單的方法是使用 onChanged 方法並將當前值儲存在一個變數中。示例程式碼如下：

    String value = "";
TextField(
  onChanged: (text) {
    value = text;
  },
)
複製程式碼

  2. 第二種方法是使用 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 元件還提供其他回撥，例如：

  1. onEditingCompleted
  2. onSubmitted
onEditingComplete: () {},
onSubmitted: (value) {},
複製程式碼

這些是在使用者單擊 iOS 上的“完成”按鈕時呼叫的回撥。

在 TextField 中使用焦點

在 TextField 上“聚焦”意味著啟用 TextField ，鍵盤的任何輸入都將導致在聚焦的 TextField 中輸入資料。

1. 使其自動聚焦

要在建立視窗時在 TextField 上自動對焦，請將自動對焦欄位設定為 true 。

TextField(
  autofocus: true,
),
複製程式碼

預設情況下，這會將焦點設定在 TextField 上。

Flutter進階：深入探究 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。

Flutter進階：深入探究 TextField

更改 TextFields 的鍵盤屬性

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

1.鍵盤型別

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

TextField(
  keyboardType: TextInputType.number,
),	
複製程式碼

型別有：

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

2.TextInputAction

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

例如：

TextField(
  textInputAction: TextInputAction.continueAction,
),
複製程式碼

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

Flutter進階：深入探究 TextField

或者：

TextField(
  textInputAction: TextInputAction.send,
),
複製程式碼

Flutter進階：深入探究 TextField

還有很多型別，這裡不一一列舉。

3.自動更正

啟用或禁用特定 TextField 的自動更正。 使用自動更正欄位進行如下設定。

TextField(
  autocorrect: false,
),
複製程式碼

這將禁用更正。

4.文字大寫

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

TextField(
  textCapitalization: TextCapitalization.sentences,
),
複製程式碼

選項有：：

  1. TextCapitalization.sentences

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

    Flutter進階：深入探究 TextField

  2. TextCapitalization.characters

    大寫句子中的所有字元。

    Flutter進階：深入探究 TextField

  3. TextCapitalization.words

    大寫每個單詞的首字母。

    Flutter進階：深入探究 TextField

Text Style, Alignment 和 Cursor

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

TextField 內的文字對齊方式

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

TextField(
  textAlign: TextAlign.center,
),
複製程式碼

Flutter進階：深入探究 TextField

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

在 TextField 中設定文字樣式

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

TextField(
  style: TextStyle(color: Colors.red, fontWeight: FontWeight.w300),
),
複製程式碼

Flutter進階：深入探究 TextField

更改 TextField 中的游標

可以直接自定義 TextField 元件的游標。

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

TextField(
  cursorColor: Colors.red,
  cursorRadius: Radius.circular(16.0),
  cursorWidth: 16.0,
),
複製程式碼

Flutter進階：深入探究 TextField

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

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

控制最大字元數

TextField(
  maxLength: 4,
),
複製程式碼

Flutter進階：深入探究 TextField

通過設定 maxLength 屬性，將強制執行最大長度，並且預設情況下會將計數器新增到 TextField 。

製作可擴充套件的TextField

有時，我們需要 TextField 當一行完成時會擴充套件。 在Flutter中，做法有點奇怪（但很容易）。 我們將 maxLines 設定為 null ，預設為1。

Flutter進階：深入探究 TextField

注意：預設情況下，將 maxLines 設定為直接值會將其自動擴充套件為該行數。

TextField(
  maxLines: 3,
)
複製程式碼

Flutter進階：深入探究 TextField

模糊文字

要隱藏 TextField 中的文字，請將 obscureText 設定為true 。

TextField(
  obscureText: true,
),
複製程式碼

Flutter進階：深入探究 TextField

裝飾 TextField

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

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

使用提示和標籤屬性向使用者提供資訊

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

Hint

Label

您可以使用 “icon”，“prefixIcon” 和 “suffixIcon” 新增圖示

您可以直接向 TextFields 新增圖示。 您也可以使用 prefixText 和 suffixText 代替 Text。

TextField(
  decoration: InputDecoration(
    icon: Icon(Icons.print)
  ),
),
複製程式碼

Flutter進階：深入探究 TextField

TextField(
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.print)
  ),
),
複製程式碼

Flutter進階：深入探究 TextField

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

要使用通用元件而不是僅僅一個圖示，請使用 prefix field 。讓我們在 TextField 中新增一個圓形進度框。

TextField(
  decoration: InputDecoration(
    prefix: CircularProgressIndicator(),
  ),
),
複製程式碼

Flutter進階：深入探究 TextField

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

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

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

如果您不想要標籤而想要為使用者提供持久訊息，請使用 “helperText” 。

TextField(
  decoration: InputDecoration(
    helperText: "Hello"
  ),
),
複製程式碼

Flutter進階：深入探究 TextField

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

使用這些刪除 TextField 上的預設下劃線。

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

複製程式碼

Flutter進階：深入探究 TextField

使用 “border” 為 TextField 設定邊框

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

複製程式碼

Flutter進階：深入探究 TextField

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

最後

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

Github：github.com/MeandNi

微信：yangjk128

原文部落格：meandni.com/2019/01/26/…

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

參考連結

原英文部落格

官方文件

相關文章