當前位置:編程學習大全網 - 源碼下載 - Flutter TextField 文本輸入框的基本屬性及詳解

Flutter TextField 文本輸入框的基本屬性及詳解

源碼分析:

分析源碼可得,TextField 是有狀態 StatefulWidget,有豐富的屬性,自定義化較高,實踐中需要合理利用各種回調;

1、光標的相關屬性;cursorColor 為光標顏色,cursorWidth 為光標寬度,cursorRadius 為光標圓角;其中 Radius 提供了 circle 圓角和 elliptical 非圓角兩種;

2、textAlign 為文字起始位置,可根據業務光標居左/居右/居中等;註意只是文字開始方向;textDirection 問文字內容方向,從左向右或從右向左;

3、maxLength 為字符長度,設置時默認是展示壹行,且右下角有編輯長度與整體長度對比;與 maxLengthEnforced 配合,maxLengthEnforced 為 true 時達到最大字符長度後不可編輯;為 false 時可繼續編輯展示有差別;

4、設置 maxLength 之後右下角默認有字符計數器,設置 TextField.noMaxLength 即可只展示輸入字符數;

5、maxLines 為允許展現的最大行數,在使用 maxLength 時內容超過壹行不會自動換行,因為默認 maxLines=1,此時設置為 null 或固定展示行數即可自動換行;區別在於 null 會展示多行,而 maxLines 最多只展示到設置行數;

6、obscureText 是否隱藏編輯內容,常見的密碼格式;

7、enableInteractiveSelection 長按是否出現剪切/復制/粘貼菜單;不可為空;

8、keyboardAppearance 為鍵盤亮度,包括 Brightness.dark/light 兩種,但僅限於 iOS 設備;

9、textCapitalization 文字大小寫;理論上 sentences 為每句話第壹個字母大寫;characters為每個字母大寫;words 為每個單詞首字母大寫;但該屬性僅限於 text keybord,和尚在本地更換多種方式並未實現,有待研究;

10、keyboardType 為鍵盤類型,和尚理解整體分為數字鍵盤和字母鍵盤等;根據設置的鍵盤類型,鍵盤會有差別;

a. 數字鍵盤

--1-- datetime 鍵盤上可隨時訪問 : 和 /;

--2-- phone 鍵盤上可隨時訪問 # 和 *;

--3-- number 鍵盤上可隨時訪問 + - * /

b. 字母鍵盤

--1-- emailAddress 鍵盤上可隨時訪問 @ 和 .;

--2-- url 鍵盤上可隨時訪問 / 和 .;

--3-- multiline 適用於多行文本換行;

--4-- text 默認字母鍵盤;

11、textInputAction 通常為鍵盤右下角操作類型,類型眾多,建議多多嘗試;

12、autofocus 是否自動獲取焦點,進入頁面優先獲取焦點,並彈出鍵盤,若頁面中有多個 TextField 設置 autofocus 為 true 則優先獲取第壹個焦點;

13、focusNode 手動獲取焦點,可配合鍵盤輸入等減少用戶操作次數,直接獲取下壹個 TextField 焦點;

14、enabled 設為 false 之後 TextField 為不可編輯狀態;

15、decoration 為邊框修飾,可以借此來調整 TextField 展示效果;可以設置前置圖標,後置圖片,邊框屬性,內容屬性等,會在後續集中嘗試;若要完全刪除裝飾,將 decoration 設置為空即可;

16、inputFormatters 為格式驗證,例如原生 Android 中通常會限制輸入手機號或其他特殊字符,在 Flutter 中也可以借此來進行格式限制,包括正則表達式;使用時需要引入 package:flutter/services.dart;

a. LengthLimitingTextInputFormatter 限制最長字符;

b. WhitelistingTextInputFormatter 僅允許輸入白名單中字符;如 digitsOnly 僅支持數字 [0-9];

c. BlacklistingTextInputFormatter 防止輸入黑名單中字符;如 singleLineFormatter 強制輸入單行;

分析源碼 RegExp("[/]") 可以設置正則表達式;

17、onChanged 文本內容變更時回調,可實時監聽 TextField 輸入內容;

18、controller 文本控制器,監聽輸入內容回調;

19、onTap 點擊 TextField時回調;

20、onEditingComplete 在提交內容時回調,通常是點擊回車按鍵時回調;

21、onSubmit 在提交時回調,不可與 onEditingComplete 同時使用,區別在於 onSubmit 是帶返回值的回調;

問題小結:

當 TextField 設置 enableInteractiveSelection 屬性後長按會出現菜單,默認為英文,可通過設置 Flutter 國際化來處理;

(1)在 pubspec.yaml 中集成 flutter_localizations;

2)在 MaterialApp 中設置本地化代理和支持的語言類型;

(1)將 maxLength 設置為 null 僅使用 LengthLimitingTextInputFormatter 限制最長字符;

(2)設置 InputDecoration 中 decoration 屬性為空;但是底部有空余,只是隱藏而並非消失;

  • 上一篇:幼兒園優秀教案
  • 下一篇:BERT:深度雙向預訓練語言模型
  • copyright 2024編程學習大全網