深入Flutter TextField

kinsomy發表於2018-12-14
Flutter

翻譯原文來自 medium.com/flutter-com…

TextField介紹

TextField允許從使用者處收集資訊，宣告一個基礎的TextField程式碼十分簡單：

TextField()
複製程式碼

這會建立一個基礎TextField元件：

深入Flutter TextField

從TextField收集資訊

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

1.最簡單的方式就是使用onChanged回撥方法，將TextField當前的值儲存在一個變數內，下面是示例程式碼。

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的其他回撥

//鍵盤上按了done
onEditingComplete: () {},
onSubmitted: (value) {},
複製程式碼

TextField獲得焦點

TextField獲得焦點意味著有一個TextField被啟用並且任何來自鍵盤的輸入都會被鍵入到獲得焦點的TextField內。

1.自動獲得焦點

為了讓TextField在widget建立的時候自動獲取焦點，設定autofocus屬性為true。

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

深入Flutter TextField

2.自定義焦點切換

如果我們想程式碼變化焦點而不是僅僅自動獲得焦點需要怎麼做呢？由於我們需要某種方式來引用我們想要關注的TextField，我們將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"),
),
複製程式碼

這裡我們建立了兩個focus node並且將他們依附到TextField上，當點選NextField按鈕時，使用FocusScope去為下一個TextField申請獲取焦點。

深入Flutter TextField

TextField更換鍵盤屬性

在Flutter中，TextField允許你定製和鍵盤相關的屬性。

1.鍵盤型別

TextField可以在彈出鍵盤的時候修改鍵盤型別。使用以下程式碼：

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

型別有如下幾種：

  • TextInputType.text (Normal complete keyboard)
  • TextInputType.number (A numerical keyboard)
  • TextInputType.emailAddress (Normal keyboard with an “@”)
  • TextInputType.datetime (Numerical keyboard with a “/” and “:”)
  • TextInputType.multiline (Numerical keyboard with options to enabled signed and decimal mode)

2.鍵盤操作按鈕行為

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

//傳送操作
TextField(
  textInputAction: TextInputAction.send,
),
複製程式碼

深入Flutter TextField

完整的行為列表太長，這裡不做展示了，需要的可以進入TextInputAction類檢視。

啟用或禁用特定TextField的自動更正。使用自動更正欄位進行設定。這同時也會禁用輸入建議。

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

3.文字大寫

TextField提供了一些選項，用來對使用者輸入的文字大寫化。

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

1.TextCapitalization.sentences

這是最常見的大寫化型別，每個句子的第一個字母被轉換成大寫。

深入Flutter TextField

2.TextCapitalization.characters

大寫句子中的所有字元。

深入Flutter TextField

3. TextCapitalization.words

對每個單詞首字母大寫。

深入Flutter TextField

文字對齊

使用textAlign屬性設定TextField內的游標對齊方式。

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

游標和文字會從TextField元件中間開始。

深入Flutter TextField
還有其他屬性包括，start, end, left, right, center, justify.

文字樣式

我們使用style屬性來更改TextField內部文字的外觀。 使用它來更改顏色，字型大小等。這類似於文字小部件中的樣式屬性，因此我們不會花太多時間來探索它。

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

深入Flutter TextField

更換游標樣式

可以直接從TextField小部件自定義游標。 您可以更改角落的游標顏色，寬度和半徑。 例如，這裡我製作一個圓形的紅色游標。

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

深入Flutter TextField

控制最大字元數

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

深入Flutter TextField
設定maxLength屬性後，TextField會預設新增一個長度計數器。

可擴充套件TextField

有時，我們需要一個TextField，當一行完成時會擴充套件。 在Flutter中，它有點奇怪（但很容易）。 為此，我們將maxLines設定為null，預設為1。 設定為null不是我們習以為常的東西，但是它很容易做到。

注意：將maxLines屬性設定為一個確定的數值，會將TextField直接擴大到對應的最大行

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

深入Flutter TextField

隱藏文字內容

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

深入Flutter TextField

裝飾TextField

到目前為止，我們專注於Flutter提供的輸入功能。 現在我們將實際設計一個花哨的TextField。 為了裝飾TextField，我們使用帶有InputDecoration的decoration屬性。 由於InputDecoration類非常龐大，我們將嘗試快速檢視大多數重要屬性。

hint和label

hint:

深入Flutter TextField

label:

深入Flutter TextField

圖示

//輸入框外圖示
TextField(
  decoration: InputDecoration(
    icon: Icon(Icons.print)
  ),
),
//字首圖示
TextField(
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.print)
  ),
),

//輸入框字首元件
TextField(
  decoration: InputDecoration(
    prefix: CircularProgressIndicator(),
  ),
),
複製程式碼

深入Flutter TextField

深入Flutter TextField

深入Flutter TextField

每個屬性像hint，label都有各自的style設定

1.用hintstyle修改hint樣式

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

深入Flutter TextField

2.幫助性提示

和label不一樣，它會一直顯示在輸入框下部

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

深入Flutter TextField

3.使用decoration: null或者InputDecoration.collapsed可以去除預設的下劃線。

TextField(
  decoration: InputDecoration.collapsed(hintText: "")
),
複製程式碼

4.使用border給TextField設定邊框

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder()
  )
),
複製程式碼

深入Flutter TextField

相關文章