Flutter Widget之TextField使用解析

TextField組件在咱們平常開發中很經常使用，下面就來總結一下它的用法。

從 TextField 中檢索信息

1.第一種方法是使用 onChanged 方法並將當前值存儲在一個簡單的變量中。

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

2.第二種方法是使用 TextEditingController。控制器附加到 TextField 上，讓咱們監聽和控制 TextField 的文本。

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

print(controller.text);//輸出當前TextField的值
複製代碼

TextField 的其餘回調

///這些是在用戶單擊 iOS 上的「完成」按鈕時調用的回調
onEditingComplete: () {},
onSubmitted: (value) {},
複製代碼

在 TextFields 中使用焦點

1.使用自動對焦

TextField(
  autofocus: true,
)
複製代碼

2.改變自定義焦點

///點擊RaisedButton時能夠切換下一個TextField
FocusNode nodeOne = FocusNode();
FocusNode nodeTwo = FocusNode();

TextField(
  focusNode: nodeOne,
),
TextField(
  focusNode: nodeTwo,
),
RaisedButton(
  onPressed: () {
    FocusScope.of(context).requestFocus(nodeTwo);
  },
  child: Text("Next Field"),
)
複製代碼

更改 TextFields 的鍵盤屬性

1.鍵盤類型

TextInputType.text (普通完整鍵盤)
TextInputType.number (數字鍵盤)
TextInputType.emailAddress  (帶有「@」的普通鍵盤)
TextInputType.datetime (帶有「/」和「 : 」的數字鍵盤)
TextInputType.numberWithOptions  (帶有啓用簽名和十進制模式選項的數字鍵盤)
TextInputType.multiline (優化多行信息)

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

2.更改鍵盤自己的操做按鈕

///這會致使「完成」按鈕被「繼續」按鈕取代
TextField(
  textInputAction: TextInputAction.continueAction,
)

///這會致使「完成」按鈕被「發送」按鈕取代
TextField(
  textInputAction: TextInputAction.send,
)
複製代碼

3.自動更正

TextField(
  autocorrect: false,
)
複製代碼

4.文本大寫

TextCapitalization.sentences ///每一個句子的首字母都被大寫
TextCapitalization.characters ///句子中的全部字符都大寫
TextCapitalization.words ///每一個單詞的首字母大寫
TextField(
  textCapitalization: TextCapitalization.sentences,
)
複製代碼

文本樣式、對齊方式和光標選項

1.文本字段中的文本對齊方式

///這將致使光標和文本在 TextField 中間開始
TextField(
  textAlign: TextAlign.center,
)
複製代碼

2.在 TextField 中設置文本的樣式

///style 屬性用來更改 TextField 中文本的外觀、顏色、字體大小等。
TextField(
  style: TextStyle(color: Colors.red, fontWeight: FontWeight.w300),
)
複製代碼

3.更改 TextField 中的光標

///更改光標顏色，寬度和角的半徑，這裏製做了一個紅色的圓形光標
TextField(
  cursorColor: Colors.red,
  cursorRadius: Radius.circular(16.0),
  cursorWidth: 16.0,
)
複製代碼

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

1.控制最大字符數

TextField(
  maxLength: 4,
)
複製代碼

1.控制最大行數

TextField(
  maxLines: 3,
)
複製代碼

模糊文本

TextField(
  obscureText: true,
)
複製代碼

裝飾 TextField

1.使用提示

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

2.增長圖標

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

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

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

3.去除光標

TextField(
  decoration: InputDecoration.collapsed(hintText: "")
)
複製代碼

4.增長邊框

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder()
  )
)
複製代碼

5.持久消息

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder()
  )
)
複製代碼