Flutter中TextField使用

TextField 屬性使用（熟悉使用屬性，有助於快速構建控件）

decoration 這個屬性下

new TextField(
            decoration: new InputDecoration(
                hintText: "請輸入",
                //labelText: "姓名",
                //helperText: "姓名輸入",
                border: const UnderlineInputBorder(
                  borderSide: BorderSide(style: BorderStyle.solid),
                ),
              prefixIcon: new Image.asset("images/homes.png"),
              prefixText: "prefixText",
              prefixStyle: TextStyle(fontSize: 20.0,color: Colors.red),
              counterText: "counterText",
              counterStyle: TextStyle(fontSize: 20.0,color: Colors.blue),
              filled: true,
              fillColor: Colors.amberAccent,
              semanticCounterText: "semanticCounterText"
            ),
            controller: _textEditingController,
            textAlign: TextAlign.center,
            textDirection: TextDirection.ltr,
            textCapitalization: TextCapitalization.sentences,

          ),
複製代碼

在沒有獲取焦點時，如上圖

hintText：文本輸入提示，不能看見。labelText: 能看見。helperText：在下方提示

hintText：文本輸入提示，能看見。labelText: 想說移動，能看見。helperText：在下方提示

border： 屬性 有兩個 OutlineInputBorder 和 UnderlineInputBorder 一個是有邊框一個是無邊框。

Iocn：設置圖片，返回的控件是 Widget 因此能夠用任何控件做爲它的 子控件，這裏我使用Image,如圖

而後設置文本居中顯示，如圖：

(textAlign: TextAlign.center,)對於這個居中顯示 對Icon 沒有任何反應，因此這個 icon 屬性設置的任何控件都是在最左邊。

prefix：返回的的是 Widget ,加載任何控件均可以，仍是使用 Image 返回，樣式如圖：

prefixIcon：返回的的是 Widget ,加載任何控件均可以，仍是使用 Image 返回，樣式如圖：

prefixIcon與 prefix 對比：

prefix獲取焦點是才顯示而且文本輸入不在一個基線上，prefixIcon是相反

prefixText：String 類型 ，是prefix 的提示,並且只有獲取焦點是才顯示 ，顯示樣式如圖：

prefixStyle：是對prefixText的字體樣式設置

suffixIcon,suffix,suffixText,suffixStyle:與prefix等屬性相反。

counterText和counterStyle：設置輸入框右下角的文本設置，如圖：

filled與fillColor：filled 是 bool 類型，是否填充滿整個控件。fillColor是填充顏色：樣式如圖：

this.errorBorder,
this.focusedBorder,
this.focusedErrorBorder,
this.disabledBorder,
this.enabledBorder,
this.border,
//以上都是邊框設置 
//有兩個 OutlineInputBorder 和 UnderlineInputBorder
複製代碼

TextCapitalization 屬性

words, 文本內容
  sentences, 句子使用
  characters, 大寫
  none, 默認
複製代碼

TextEditingController

使用方式：

TextEditingController _textEditingController = new TextEditingController();
而後：controller: _textEditingController,
_textEditingController.text //獲取輸入內容
_textEditingController.text = "1213231"; //設置內容
_textEditingController.clear() //清空輸入內容
複製代碼

textInputAction 文本須要作的什麼動做，TextInputAction 是一個枚舉類型。修改對應的值鍵盤右下角的圖片按鈕會作相應的改變

none 默認 回車（換行，結合maxLines: 2,使用）
unspecified 回車（換行，結合maxLines: 2,使用）
newline 同上
done 一個 v 的符號
go 一個箭頭
search 搜索
send 發送（一個短信圖標）
next 至關於鍵盤上的tab 切換下個輸入框
previous 與 next 相反
iOS：下面這些值 源碼說的 （Android does not have an IME input type of "emergencyCall."）
continueAction 
join
route
emergencyCall
複製代碼

onChanged 監聽文本變化

autofocus 加入顯示出來後是否獲取焦點 （默認爲false）

obscureText 隱藏文本輸入內容 用 圓點 符號代替，而且文本不能輸入漢字

maxLength: 6,和 maxLengthEnforced: true, 若是設置了 maxLength ，可是maxLengthEnforced = false 設置的長度就無效 ，只有等於 true 的時候長度設置才生效

onEditingComplete 和 onSubmitted 當配置屬性 textInputAction 是 就有變化 好比down之類纔有效 （none 是無效的）

onEditingComplete: (){
    print("onEditingComplete");
},
onSubmitted: (String b){
    print("onSubmitted $b");
},
複製代碼

遊標設置 cursorWidth cursorRadius cursorColor 就是三個屬性 寬度 圓角 顏色

enabled 設置true(默認) 可編輯，而且顯示下橫線 。false 相反

後續.......