Flutter進階：深刻探究 TextField

TextField 介紹

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

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 上。

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,
),	
複製代碼

類型有：

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」 按鈕替換：

或者：

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

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

3.自動更正

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

TextField(
  autocorrect: false,
),
複製代碼

這將禁用更正。

4.文本大寫

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

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

選項有：：

1. TextCapitalization.sentences

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

   

2. TextCapitalization.characters

   大寫句子中的全部字符。

   

3. 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：github.com/MeandNi

微信：yangjk128

原文博客：meandni.com/2019/01/26/…

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

參考連接

原英文博客

官方文檔