Flutter文本輸入框TextField屬性詳解

TextField

Flutter中的文本輸入框（TextField）就類似於Android中的EditText，但是用起來比EditText方便很多，改變樣式也更加的方便。下面我們來看一下TextField的構造方法

構造方法

  const TextField({
    Key key,
    this.controller,    //編輯框的控制器，跟文本框的交互一般都通過該屬性完成，如果不創建的話默認會自動創建
    this.focusNode,  //用於管理焦點
    this.decoration = const InputDecoration(),   //輸入框的裝飾器，用來修改外觀
    TextInputType keyboardType,   //設置輸入類型，不同的輸入類型鍵盤不一樣
    this.textInputAction,   //用於控制鍵盤動作（一般位於右下角，默認是完成）
    this.textCapitalization = TextCapitalization.none,
    this.style,    //輸入的文本樣式
    this.textAlign = TextAlign.start,   //輸入的文本位置
    this.textDirection,    //輸入的文字排列方向，一般不會修改這個屬性
    this.autofocus = false,   //是否自動獲取焦點
    this.obscureText = false,   //是否隱藏輸入的文字，一般用在密碼輸入框中
    this.autocorrect = true,   //是否自動校驗
    this.maxLines = 1,   //最大行
    this.maxLength,   //能輸入的最大字符個數
    this.maxLengthEnforced = true,  //配合maxLength一起使用，在達到最大長度時是否阻止輸入
    this.onChanged,  //輸入文本發生變化時的回調
    this.onEditingComplete,   //點擊鍵盤完成按鈕時觸發的回調，該回調沒有參數，(){}
    this.onSubmitted,  //同樣是點擊鍵盤完成按鈕時觸發的回調，該回調有參數，參數即爲當前輸入框中的值。(String){}
    this.inputFormatters,   //對輸入文本的校驗
    this.enabled,    //輸入框是否可用
    this.cursorWidth = 2.0,  //光標的寬度
    this.cursorRadius,  //光標的圓角
    this.cursorColor,  //光標的顏色
    this.keyboardAppearance,
    this.scrollPadding = const EdgeInsets.all(20.0),
    this.dragStartBehavior = DragStartBehavior.down,
    this.enableInteractiveSelection,
    this.onTap,    //點擊輸入框時的回調(){}
    this.buildCounter,
  })

可以看到，屬性還是很多的，但都比較簡單。

TextField decoration

我們首先來看一下decoration
decoration（裝飾器） 接收一個InputDecoration類型的值，主要用於控制TextField的外觀以及提示信息等
我們來看看InputDecoration的構造方法

InputDecoration({
    this.icon,    //位於裝飾器外部和輸入框前面的圖片
    this.labelText,  //用於描述輸入框，例如這個輸入框是用來輸入用戶名還是密碼的，當輸入框獲取焦點時默認會浮動到上方，
    this.labelStyle,  // 控制labelText的樣式,接收一個TextStyle類型的值
    this.helperText, //輔助文本，位於輸入框下方，如果errorText不爲空的話，則helperText不會顯示
    this.helperStyle, //helperText的樣式
    this.hintText,  //提示文本，位於輸入框內部
    this.hintStyle, //hintText的樣式
    this.hintMaxLines, //提示信息最大行數
    this.errorText,  //錯誤信息提示
    this.errorStyle, //errorText的樣式
    this.errorMaxLines,   //errorText最大行數
    this.hasFloatingPlaceholder = true,  //labelText是否浮動，默認爲true，修改爲false則labelText在輸入框獲取焦點時不會浮動且不顯示
    this.isDense,   //改變輸入框是否爲密集型，默認爲false，修改爲true時，圖標及間距會變小
    this.contentPadding, //內間距
    this.prefixIcon,  //位於輸入框內部起始位置的圖標。
    this.prefix,   //預先填充的Widget,跟prefixText同時只能出現一個
    this.prefixText,  //預填充的文本，例如手機號前面預先加上區號等
    this.prefixStyle,  //prefixText的樣式
    this.suffixIcon, //位於輸入框後面的圖片,例如一般輸入框後面會有個眼睛，控制輸入內容是否明文
    this.suffix,  //位於輸入框尾部的控件，同樣的不能和suffixText同時使用
    this.suffixText,//位於尾部的填充文字
    this.suffixStyle,  //suffixText的樣式
    this.counter,//位於輸入框右下方的小控件，不能和counterText同時使用
    this.counterText,//位於右下方顯示的文本，常用於顯示輸入的字符數量
    this.counterStyle, //counterText的樣式
    this.filled,  //如果爲true，則輸入使用fillColor指定的顏色填充
    this.fillColor,  //相當於輸入框的背景顏色
    this.errorBorder,   //errorText不爲空，輸入框沒有焦點時要顯示的邊框
    this.focusedBorder,  //輸入框有焦點時的邊框,如果errorText不爲空的話，該屬性無效
    this.focusedErrorBorder,  //errorText不爲空時，輸入框有焦點時的邊框
    this.disabledBorder,  //輸入框禁用時顯示的邊框，如果errorText不爲空的話，該屬性無效
    this.enabledBorder,  //輸入框可用時顯示的邊框，如果errorText不爲空的話，該屬性無效
    this.border, //正常情況下的border
    this.enabled = true,  //輸入框是否可用
    this.semanticCounterText,  
    this.alignLabelWithHint,
  })

我們先來用一下InputDecoration，這裏我們主要介紹一下常用的屬性
默認樣式

TextField(
      decoration: InputDecoration(),
    );

icon

TextField(
      decoration: InputDecoration(
        icon: Icon(Icons.person),
      ),
    );

labelText

用於描述輸入框，例如這個輸入框是用來輸入用戶名還是密碼的，當輸入框獲取焦點時默認會浮動到上方

TextField(
      decoration: InputDecoration(
        icon: Icon(Icons.person),
        labelText: "labelText",
      ),
    );

下面輸入框的用戶名對應的就是labelText

labelStyle

設置labelText的樣式

TextField(
      decoration: InputDecoration(
          icon: Icon(Icons.person),
          labelText: "labelText",
          labelStyle: TextStyle(
            color: Colors.red,
            fontSize: 20,
          )),
    );

helperText

輔助文本，位於輸入框下方，如果errorText不爲空的話，則helperText不會顯示

TextField(
      decoration: InputDecoration(
        icon: Icon(Icons.person),
        labelText: "labelText",
        helperText: "helperText",
      ),
    );

helperStyle

TextField(
      decoration: InputDecoration(
        icon: Icon(Icons.person),
        labelText: "labelText",
        helperText: "helperText",
        helperStyle: TextStyle(
          color: Colors.green,//綠色
          fontSize: 20,//字體變大
        ),
      ),
    );

errorText

錯誤提示信息，如果該屬性不爲null的話，labelText失效。

TextField(
      decoration: InputDecoration(
        icon: Icon(Icons.person),
        labelText: "labelText",
        helperText: "helperText",
        errorText: "errorText",
      ),
    );

hintText

輸入框中的提示信息，這個沒啥好說的

TextField(
      decoration: InputDecoration(
        icon: Icon(Icons.person),
        hintText: "hintText",
      ),
    );

hasFloatingPlaceholder

labelText是否浮動，默認爲true，修改爲false則labelText在輸入框獲取焦點時不會浮動且不顯示

TextField(
      decoration: InputDecoration(
        icon: Icon(Icons.person),
        hasFloatingPlaceholder: false,
        labelText: "labelText",
        helperText: "helperText",
        errorText: "errorText",
        hintText: "hintText",
      ),
    );

prefixIcon、prefixText

圖片和預填充的文字

TextField(
      decoration: InputDecoration(
        icon: Icon(Icons.person),
        hasFloatingPlaceholder: false,
        labelText: "labelText",
        helperText: "helperText",
        errorText: "errorText",
       // hintText: "hintText",
        prefixIcon: Icon(Icons.perm_identity),
        prefixText: "prefixText",
      ),
    );

suffixIcon、suffixText

TextField(
      decoration: InputDecoration(
        //icon: Icon(Icons.person),
        hasFloatingPlaceholder: false,
        labelText: "labelText",
//        helperText: "helperText",
//        errorText: "errorText",
        // hintText: "hintText",
        prefixIcon: Icon(Icons.perm_identity),
        prefixText: "prefixText",
        suffixIcon: Icon(
          Icons.remove_red_eye,
        ),
        suffixText: "suffixText",
      ),
    );

counterText

TextField(
      decoration: InputDecoration(
        //icon: Icon(Icons.person),
        hasFloatingPlaceholder: false,
        labelText: "labelText",
        // helperText: "helperText",
//        errorText: "errorText",
        // hintText: "hintText",
//        prefixIcon: Icon(Icons.perm_identity),
//        prefixText: "prefixText",
//        suffixIcon: Icon(
//          Icons.remove_red_eye,
//        ),
//        suffixText: "suffixText",

        counterText: "counterText",
      ),
    );

filled，fillColor

顏色填充

TextField(
      decoration: InputDecoration(
        //icon: Icon(Icons.person),
        hasFloatingPlaceholder: false,
        labelText: "labelText",
        // helperText: "helperText",
//        errorText: "errorText",
         hintText: "hintText",
        prefixIcon: Icon(Icons.perm_identity),
//        prefixText: "prefixText",
//        suffixIcon: Icon(
//          Icons.remove_red_eye,
//        ),
//        suffixText: "suffixText",

       // counterText: "counterText",
        filled: true,
        fillColor: Colors.grey,
      ),
    );

下面來看一下兩個輸入框的對比：

上面的輸入框代碼：

TextField(
      decoration: InputDecoration(
        icon: Icon(Icons.person),
       // hasFloatingPlaceholder: false,
        labelText: "labelText",
        helperText: "helperText",
        errorText: "errorText",
        hintText: "hintText",
        prefixIcon: Icon(Icons.perm_identity),
        prefixText: "prefixText",
        suffixIcon: Icon(
          Icons.remove_red_eye,
        ),
        suffixText: "suffixText",
        counterText: "counterText",
        filled: true,
       // fillColor: Colors.grey,
      ),
    );

下面的輸入框代碼：

TextField(
      decoration: InputDecoration(
        icon: Icon(Icons.person),
        prefixIcon: Icon(Icons.perm_identity),
        labelText: "手機號",
        helperText: "用戶名爲手機號或者郵箱",
        errorText: "手機號碼不正確",
        hintText: "請輸入手機號碼",
        prefixText: "+86",
        suffixIcon: Icon(
          Icons.remove_red_eye,
        ),
        suffixText: "隱藏輸入文本",
        counterText: "0/10",
        filled: true,
      ),
    );

圖示：

border、errorBorder、focusedBorder、focusedErrorBorder、disabledBorder、enabledBorder

不同狀態下的邊框樣式，他們接收值的類型都一樣，不過需要注意優先級。
大致分爲一下幾種情況

1. 控件禁用時
當enabled爲false時，如果指定了disabledBorder，優先使用disabledBorder，沒有的話設置disabledBorder則使用border的部分樣式（顏色默認是灰色）

2. 控件啓用(enable爲true)，但errorText有值
輸入框沒有焦點時，優先使用errorBorder的樣式，輸入框有焦點時，優先使用focusedErrorBorder，如果這兩個都沒有設置則使用border的部分樣式（顏色默認是紅色）

3. 控件啓用狀態，且errorText沒有值
輸入框沒有焦點時，優先使用enabledBorder ，有焦點時，優先使用focusedBorder，兩者均沒有指定時，使用默認的border

總體來說，默認的border優先級別較低。
建議：

1. 在開發過程中我們如果需要errorText的話，我們只需要設置 errorBorder、focusedErrorBorder這三個即可。不需要errorText的話
2. 不需要errorText的話，只需要設置enabledBorder 、focusedBorder

下面我們來看一下border的值

1. InputBorder.none 沒有任何邊框

代碼：

TextField(
      decoration: InputDecoration(
        border:InputBorder.none,
        labelText: "labelText",
        helperText: "helperText",
       // errorText: "errorText",
        hintText: "hintText",
        prefixIcon: Icon(Icons.perm_identity),
      ),
    );

2. OutlineInputBorder（外邊線）
代碼：

TextField(
      decoration: InputDecoration(
        enabledBorder: OutlineInputBorder(
          /*邊角*/
          borderRadius: BorderRadius.all(
            Radius.circular(30), //邊角爲30
          ),
          borderSide: BorderSide(
            color: Colors.amber, //邊線顏色爲黃色
            width: 2, //邊線寬度爲2
          ),
        ),
        focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(
          color: Colors.green, //邊框顏色爲綠色
          width: 5, //寬度爲5
        )),
        labelText: "labelText",
        helperText: "helperText",
        // errorText: "errorText",
        hintText: "hintText",
        prefixIcon: Icon(Icons.perm_identity),
      ),
    );

2. UnderlineInputBorder（底邊線，默認就是這個）

TextField(
      decoration: InputDecoration(
        errorBorder: UnderlineInputBorder(
          /*邊角*/
          borderRadius: BorderRadius.all(
            Radius.circular(30), //邊角爲30
          ),
          borderSide: BorderSide(
            color: Colors.amber, //邊線顏色爲黃色
            width: 2, //邊線寬度爲2
          ),
        ),
        focusedErrorBorder: UnderlineInputBorder(
            borderSide: BorderSide(
          color: Colors.green, //邊框顏色爲綠色
          width: 5, //寬度爲5
        )),
        labelText: "labelText",
        helperText: "helperText",
         errorText: "errorText",
        hintText: "hintText",
        prefixIcon: Icon(Icons.perm_identity),
      ),
    );

到這裏基本上InputDecoration的屬性都介紹完畢了。