Flutter進階：深入探究 TextField

摘要： TextField 元件可以讓使用者填寫資訊。 實現 TextField 的程式碼非常簡單： TextField() 複製程式碼 從TextField中檢索資訊 由於 TextFields 元件沒有像 Android 中那樣的 ID，因此無法根據需要檢索文字，而...

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()
)
),

複製程式碼

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