Flutter TextField 詳細(xì)介紹

Flutter Textfield可以實現(xiàn)的效果

image.png

基本屬性

TextField

 const TextField({
    Key key,
    this.controller,//控制器
    this.focusNode,//焦點
    this.obscureText = false,//是否隱藏文本，即顯示密碼類型
    this.maxLines = 1,//最多行數(shù)，高度與行數(shù)同步
    this.autofocus = false,//自動聚焦
    this.decoration = const InputDecoration(),//裝飾
    TextInputType keyboardType,//鍵盤類型，即輸入類型
    this.onChanged,//輸入改變回調(diào)

    //以下屬性不常用,用到再來查看
    this.textInputAction,//鍵盤按鈕
    this.textCapitalization = TextCapitalization.none,//大小寫
    this.style,//樣式
    this.strutStyle,
    this.textAlign = TextAlign.start,//對齊方式
    this.textDirection,
    this.autocorrect = true,//自動更正
    this.minLines,//最小行數(shù)
    this.expands = false,
    this.maxLength,//最多輸入數(shù)，有值后右下角就會有一個計數(shù)器
    this.maxLengthEnforced = true,
    this.onEditingComplete,//輸入完成時，配合TextInputAction.done使用
    this.onSubmitted,//提交時,配合TextInputAction
    this.inputFormatters,//輸入校驗
    this.enabled,//是否可用
    this.cursorWidth = 2.0,//光標(biāo)寬度
    this.cursorRadius,//光標(biāo)圓角
    this.cursorColor,//光標(biāo)顏色
    this.keyboardAppearance,
    this.scrollPadding = const EdgeInsets.all(20.0),
    this.dragStartBehavior = DragStartBehavior.start,
    this.enableInteractiveSelection,
    this.onTap,//點擊事件
    this.buildCounter,
    this.scrollPhysics,
  })

屬性有很多但是很多都不常用,不用死記,記幾個常用即可

decoration（裝飾器） 接收一個InputDecoration類型的值，主要用于控制TextField的外觀以及提示信息等 這里介紹下這個重要的Widget,

InputDecoration

InputDecoration({
    this.icon,    //位于裝飾器外部和輸入框前面的圖片
    this.labelText,  //用于描述輸入框，例如這個輸入框是用來輸入用戶名還是密碼的，當(dāng)輸入框獲取焦點時默認(rèn)會浮動到上方，
    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是否浮動，默認(rèn)為true，修改為false則labelText在輸入框獲取焦點時不會浮動且不顯示
    this.isDense,   //改變輸入框是否為密集型，默認(rèn)為false，修改為true時，圖標(biāo)及間距會變小
    this.contentPadding, //內(nèi)間距
    this.prefixIcon,  //位于輸入框內(nèi)部起始位置的圖標(biāo)。
    this.prefix,   //預(yù)先填充的Widget,跟prefixText同時只能出現(xiàn)一個
    this.prefixText,  //預(yù)填充的文本，例如手機(jī)號前面預(yù)先加上區(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,  //相當(dāng)于輸入框的背景顏色
    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,
  })

屬性也是很多下面舉幾個常用的例子

樣式

基礎(chǔ)樣式

TextField(),

很簡單，無任何參數(shù)，當(dāng)然效果也很簡單。(默認(rèn)是帶下劃線的)

image.png

隱藏文本(變成密碼框)

修改obscureText屬性值

              TextField(
                obscureText: true,
              ),
image.png

鍵盤類型

鍵盤類型 即 可輸入的類型，比如number就只能輸入數(shù)字

             TextField(
                keyboardType: TextInputType.number, // TextInputType還有很多別鍵盤可以根據(jù)自己需要的場景調(diào)用
              ),
image.png

最多行數(shù)

設(shè)置最多3行 (設(shè)置的行數(shù)會影響TextField高度)

           TextField(
                maxLines: 3,
              ),
image.png

InputDecoration 裝飾器

這個InputDecoration可以控制textField的很多樣式 如 圖標(biāo),前后圖標(biāo),前后文字,提示文本,幫助文本,錯誤文本 邊框等等

  • placeholder 提示文字

            TextField(
                decoration: InputDecoration(
                  hintText: '請輸入賬號aaa',
                ),
              ),
image.png

  • 去除下劃線(早就看他不舒服了)


  TextField(
                decoration: InputDecoration
                {
                     hintText: '請輸入刪除車輛的原因',
                      
                     border:InputBorder.none
              }
              ),
image.png

  • 邊框

   TextField(
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                ),
              ),
image.png

無論是下面的裝飾線，還是矩形邊框裝飾線，失焦后都是 灰色 ,對焦都是主題顏色的 這里你可能會問我怎么改變他邊框的顏色呢OutlineInputBorder里的borderSide是無法改變的,這是flutter 的一個坑

  • 解決方案 包裹一層Theme Widget

  Theme(
      data: new ThemeData(primaryColor: Colors.red, hintColor: Colors.blue),
      child: TextField(
        decoration: InputDecoration(
            contentPadding: EdgeInsets.all(10.0),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(15.0),
//            borderSide: BorderSide(color: Colors.red, width: 3.0, style: BorderStyle.solid)//沒什么卵效果
            )),
      ),
    );

這里還有個坑 ThemeData(primaryColor: Colors.red, hintColor: Colors.blue), 這個hintColor 默認(rèn)顏色好像還是不起作用,這個問題不在怎么設(shè)置,知道的可以回復(fù)一下,3q

  • 圓角

     TextField(
                decoration: InputDecoration(
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(30)),
                  ),
                ),
              ),
image.png

圖標(biāo)

圖標(biāo)有3種

  • 左側(cè)外的圖標(biāo)

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

  • 左側(cè)內(nèi)圖標(biāo)

      TextField(
                decoration: InputDecoration(
                  prefixIcon: Icon(Icons.phone_android),
                ),
              ),
image.png

  • 右側(cè)內(nèi)圖標(biāo)

         TextField(
                decoration: InputDecoration(
                  suffixIcon: IconButton(
                    icon: Icon(Icons.close),
                    onPressed: () {
                      controller.clear();
                    },
                  ),
                ),
              ),
image.png

還有一些什么幫助文字,錯誤文字,懸浮文字,前后填充文字 這里就不一一介紹了,用到的情況較少

獲取輸入內(nèi)容

有兩種方式：

  • onChanged
    onChanged是輸入內(nèi)容改變時的回調(diào)，返回一個String類型的數(shù)值，可以用一個變量記一下
           TextField(
                onChanged: (text) {
                  print("輸入改變時" + text);
                },
              ),
  • controller
    controller控制器，初始化：
 var controller = TextEditingController();
 controller.addListener(() {});
//配置給TextField
   TextField(
                controller: controller,
        ),
//獲取輸入的值
controller.text
//清除Textfield輸入的值
controller.clear();

焦點問題

往往我們在事件中提交的時候，是需要關(guān)閉軟鍵盤的

這里我們就用到了focusNode

初始化：

   FocusNode userFocusNode = FocusNode();
   TextField(
                focusNode: userFocusNode,
              ),


//然后在需要的地方調(diào)用:失去焦點
userFocusNode.unfocus();

點擊APP別的地方(不是其他textField的時候需要收起鍵盤) FocusScope.of(context).requestFocus(); //獲取焦點的意思,你獲取了焦點,別人就失去了焦點

溢出問題

  • 軟鍵盤彈出之后遮蓋

  • 軟鍵盤彈出之后高度溢出

解決方案:

用滑動組件包裹起來（SingleChildScrollView,ListView等），這樣軟鍵盤彈出的時候，輸入框也會自動向上滑。

以上如有說的不正確的地方,猶豫剛接觸不久,還望指出.


image.png

文章轉(zhuǎn)自:
@yechaoa
https://blog.csdn.net/yechaoa/article/details/90906689

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

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