flutter - TextField基本使用

TextField屬性詳解

https://www.cnblogs.com/joe235/p/11711653.html

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,           // 是否隱藏內(nèi)容,例如密碼格式
   this.autocorrect = true,            // 是否自動校正
   this.maxLines = 1,                  // 最大行數(shù)
   this.maxLength,                     // 允許輸入的最大長度
   this.maxLengthEnforced = true,      // 是否允許超過輸入最大長度
   this.onChanged,                     // 文本內(nèi)容變更時回調(diào)
   this.onEditingComplete,             // 提交內(nèi)容時回調(diào)
   this.onSubmitted,                   // 用戶提示完成時回調(diào)
   this.inputFormatters,               // 驗證及格式
   this.enabled,                       // 是否不可點擊
   this.cursorWidth = 2.0,             // 光標寬度
   this.cursorRadius,                  // 光標圓角弧度
   this.cursorColor,                   // 光標顏色
   this.keyboardAppearance,            // 鍵盤亮度
   this.scrollPadding = const EdgeInsets.all(20.0),        // 滾動到視圖中時,填充邊距
   this.enableInteractiveSelection,    // 長按是否展示【剪切/復制/粘貼菜單LengthLimitingTextInputFormatter】
   this.onTap,                         // 點擊時回調(diào)
})

InputDecoration屬性詳解

InputDecoration({
    this.icon,    //位于裝飾器外部和輸入框前面的圖片
    this.labelText,  //用于描述輸入框,例如這個輸入框是用來輸入用戶名還是密碼的,當輸入框獲取焦點時默認會浮動到上方,
    this.labelStyle,  // 控制labelText的樣式,接收一個TextStyle類型的值
    this.helperText, //輔助文本,位于輸入框下方,如果errorText不為空的話,則helperText不會顯示
    this.helperStyle, //helperText的樣式
    this.hintText,  //提示文本,位于輸入框內(nèi)部
    this.hintStyle, //hintText的樣式
    this.hintMaxLines, //提示信息最大行數(shù)
    this.errorText,  //錯誤信息提示
    this.errorStyle, //errorText的樣式
    this.errorMaxLines,   //errorText最大行數(shù)
    this.hasFloatingPlaceholder = true,  //labelText是否浮動,默認為true,修改為false則labelText在輸入框獲取焦點時不會浮動且不顯示
    this.isDense,   //改變輸入框是否為密集型,默認為false,修改為true時,圖標及間距會變小
    this.contentPadding, //內(nèi)間距
    this.prefixIcon,  //位于輸入框內(nèi)部起始位置的圖標。
    this.prefix,   //預先填充的Widget,跟prefixText同時只能出現(xiàn)一個
    this.prefixText,  //預填充的文本,例如手機號前面預先加上區(qū)號等
    this.prefixStyle,  //prefixText的樣式
    this.suffixIcon, //位于輸入框后面的圖片,例如一般輸入框后面會有個眼睛,控制輸入內(nèi)容是否明文
    this.suffix,  //位于輸入框尾部的控件,同樣的不能和suffixText同時使用
    this.suffixText,//位于尾部的填充文字
    this.suffixStyle,  //suffixText的樣式
    this.counter,//位于輸入框右下方的小控件,不能和counterText同時使用
    this.counterText,//位于右下方顯示的文本,常用于顯示輸入的字符數(shù)量
    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.collapsed構(gòu)造方法默認無邊框

InputDecoration.collapsed(hintText: '請輸入密碼'),

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容