Flutter 65: 圖解基本 TextField 文本輸入框 (二)

??????小菜剛學(xué)習(xí)了 TextField 的基本用法，今天特意學(xué)習(xí)一下 TextField InputDecoration 文本框裝飾器的相關(guān)內(nèi)容；

InputDecoration 源碼分析

const InputDecoration({
    this.icon,                  // 裝飾器外小圖標(biāo)
    this.labelText,             // 文本框描述標(biāo)簽
    this.labelStyle,            // 文本框描述標(biāo)簽樣式
    this.helperText,            // 文本框輔助標(biāo)簽
    this.helperStyle,           // 文本框輔助標(biāo)簽樣式
    this.hintText,              // 文本框默認(rèn)提示信息
    this.hintStyle,             // 文本框默認(rèn)提示信息樣式
    this.hintMaxLines,          // 文本框默認(rèn)提示信息最大行數(shù)
    this.errorText,             // 文本框錯(cuò)誤提示信息
    this.errorStyle,            // 文本框錯(cuò)誤提示信息樣式
    this.errorMaxLines,         // 文本框錯(cuò)誤提示信息最大行數(shù)
    this.hasFloatingPlaceholder = true,     // 文本框獲取焦點(diǎn)后 labelText 是否向上浮動(dòng)
    this.isDense,               // 是否問(wèn)緊湊型文本框
    this.contentPadding,        // 文本內(nèi)邊距
    this.prefixIcon,            // 前置圖標(biāo)
    this.prefix,                // 前置預(yù)填充 Widget
    this.prefixText,            // 前置預(yù)填充文本
    this.prefixStyle,           // 前置預(yù)填充樣式
    this.suffixIcon,            // 后置圖標(biāo)
    this.suffix,                // 后置預(yù)填充 Widget
    this.suffixText,            // 后置預(yù)填充文本
    this.suffixStyle,           // 后置預(yù)填充樣式
    this.counter,               // 輸入框右下角 Widget
    this.counterText,           // 輸入框右下角文本
    this.counterStyle,          // 輸入框右下角樣式
    this.filled,                // 是否顏色填充文本框
    this.fillColor,             // 填充顏色
    this.errorBorder,           // errorText 存在時(shí)未獲取焦點(diǎn)邊框
    this.focusedBorder,         // 獲取焦點(diǎn)時(shí)邊框
    this.focusedErrorBorder,    // errorText 存在時(shí)獲取焦點(diǎn)邊框
    this.disabledBorder,        // 不可用時(shí)邊框
    this.enabledBorder,         // 可用時(shí)邊框
    this.border,                // 邊框
    this.enabled = true,        // 輸入框是否可用
    this.semanticCounterText,
    this.alignLabelWithHint,    // 覆蓋將標(biāo)簽與 TextField 的中心對(duì)齊
})

const InputDecoration.collapsed({
    @required this.hintText,
    this.hasFloatingPlaceholder = true,
    this.hintStyle,
    this.filled = false,
    this.fillColor,
    this.border = InputBorder.none,
    this.enabled = true,
})

??????分析源碼可知，Flutter 不僅提供了全面的構(gòu)建裝飾器的方式，還提供了簡(jiǎn)單便利的構(gòu)建方式 collapsed 默認(rèn)是無(wú)邊框的，且無(wú)法設(shè)置標(biāo)簽等其他屬性；

案例嘗試

  1. icon 為裝飾器外小圖標(biāo)，可靈活設(shè)置圖標(biāo)或其他 Widget，默認(rèn)距輸入框 16dp，主題可通過(guò) IconTheme 設(shè)置；
return TextField(decoration: InputDecoration(icon: Image.asset('images/ic_launcher.png')));
return TextField(decoration: InputDecoration(icon: Icon(Icons.android)));
  1. labelText 為文本框描述標(biāo)簽，為 String 類(lèi)型，直接編輯內(nèi)容即可；labelStyle 為標(biāo)簽樣式屬性；TextField 獲取焦點(diǎn)之后描述標(biāo)簽上移；
return TextField(decoration: InputDecoration(
    labelText: '用戶(hù)名：', labelStyle: TextStyle(color: Colors.purple)));
  1. helperText 為文本框輔助標(biāo)簽，一般在文本框底部，提示性?xún)?nèi)容；helperStyle 為文本框輔助標(biāo)簽樣式屬性；與 TextField 是否獲取焦點(diǎn)無(wú)變化；
return TextField(decoration: InputDecoration(
    labelText: '用戶(hù)名：', labelStyle: TextStyle(color: Colors.purple),
    helperText: '請(qǐng)輸入手機(jī)號(hào)或郵箱!', helperStyle: TextStyle(color: Colors.teal)));
  1. hintText 為文本框默認(rèn)提示信息，若設(shè)置 labelText，則 TextField 在未獲取焦點(diǎn)時(shí)優(yōu)先展示 labelText；hintStyle 為文本框提示信息樣式屬性；hintMaxLines 為提示信息過(guò)長(zhǎng)時(shí)允許展示的最大行數(shù)；
return TextField(decoration: InputDecoration(
    hintStyle: TextStyle(color: Colors.brown), hintMaxLines: 1, hintText: '請(qǐng)輸入用戶(hù)名信息!請(qǐng)輸入用戶(hù)名信息!請(qǐng)輸入用戶(hù)名信息!請(qǐng)輸入用戶(hù)名信息!請(qǐng)輸入用戶(hù)名信息!請(qǐng)輸入用戶(hù)名信息!請(qǐng)輸入用戶(hù)名信息!請(qǐng)輸入用戶(hù)名信息!請(qǐng)輸入用戶(hù)名信息!請(qǐng)輸入用戶(hù)名信息!請(qǐng)輸入用戶(hù)名信息!'));

return TextField(decoration: InputDecoration(
    labelText: '用戶(hù)名：', labelStyle: TextStyle(color: Colors.purple),
    helperText: '請(qǐng)輸入手機(jī)號(hào)或郵箱!', helperStyle: TextStyle(color: Colors.teal),
    hintText: '請(qǐng)輸入用戶(hù)名信息!請(qǐng)輸入用戶(hù)名信息!請(qǐng)輸入用戶(hù)名信息!請(qǐng)輸入用戶(hù)名信息!請(qǐng)輸入用戶(hù)名信息!請(qǐng)輸入用戶(hù)名信息!請(qǐng)輸入用戶(hù)名信息!請(qǐng)輸入用戶(hù)名信息!請(qǐng)輸入用戶(hù)名信息!請(qǐng)輸入用戶(hù)名信息!請(qǐng)輸入用戶(hù)名信息!',
    hintStyle: TextStyle(color: Colors.brown), hintMaxLines: 2));
  1. errorText 為文本框錯(cuò)誤提示信息，一般在文本框底部，當(dāng)設(shè)置 errorText 時(shí)不展示 helperText，整體默認(rèn)為紅色；errorStyle 為錯(cuò)誤提示信息樣式屬性；errorMaxLines 為錯(cuò)誤信息過(guò)長(zhǎng)時(shí)允許展示的最大行數(shù)；與 hintText 類(lèi)似；
return TextField(onChanged: (text) { setState(() { _textLength = text.length; }); },
    decoration: InputDecoration(
        labelText: '用戶(hù)名：', labelStyle: TextStyle(color: Colors.purple),
        helperText: '請(qǐng)輸入手機(jī)號(hào)或郵箱!', helperStyle: TextStyle(color: Colors.teal),
        hintText: '請(qǐng)輸入用戶(hù)名信息!', hintStyle: TextStyle(color: Colors.brown),
        errorText: _textLength > 11 ? '請(qǐng)勿超過(guò) 11 位用戶(hù)名!' : null, errorStyle: TextStyle(color: Colors.pink)));
  1. hasFloatingPlaceholder 設(shè)置 TextField 獲取焦點(diǎn)時(shí) labelText 是否向上浮動(dòng)；設(shè)置為 false 時(shí)，獲取焦點(diǎn)后 labelText 隱藏，不會(huì)向上浮動(dòng)；
return TextField(decoration: InputDecoration(labelText: '用戶(hù)名：', labelStyle: TextStyle(color: Colors.purple),
    hasFloatingPlaceholder: false));
  1. isDense 是否為緊湊型文本框，true 為緊湊型文本框，圖標(biāo)等與輸入框邊距較小；
return TextField(decoration: InputDecoration(icon: Icon(Icons.android), isDense: false));
return TextField(decoration: InputDecoration(icon: Icon(Icons.android), isDense: true));
  1. contentPadding 為編輯內(nèi)容與文本框內(nèi)邊距；
returnTextField(decoration: InputDecoration(contentPadding: EdgeInsets.all(20.0)));
  1. prefix... 是文本框前置組件，prefixIcon 為前置圖標(biāo)，固定在文本輸入框前邊，與 icon 位置不同，其樣式通過(guò) IconTheme 調(diào)整；prefixText 為前置預(yù)填充文本，例如手機(jī)號(hào)前(+86) 之類(lèi)；prefix 為前置預(yù)填充組件，可自由設(shè)置，更為靈活，但不能與 prefixText 同時(shí)使用；prefixStyle 為預(yù)填充組件樣式；
return TextField(decoration: InputDecoration(
    prefixIcon: Icon(Icons.supervised_user_circle), prefixText: '(+86)', prefixStyle: TextStyle(color: Colors.purple.withOpacity(0.4))));
    
return TextField(decoration: InputDecoration(
    prefixIcon: Icon(Icons.supervised_user_circle), prefixStyle: TextStyle(color: Colors.purple.withOpacity(0.4)),
    prefix: Row(mainAxisSize: MainAxisSize.min, children: <Widget>[Icon(Icons.phone), Text('(+86)')])));
  1. suffix... 為文本框后置組件系列；與 prefix... 用法一致；
return TextField(decoration: InputDecoration(
    suffixIcon: Icon(Icons.close), suffixText: '關(guān)閉', suffixStyle: TextStyle(color: Colors.purple.withOpacity(0.4))));
            
return TextField(decoration: InputDecoration(
    suffixIcon: Icon(Icons.close), suffixStyle: TextStyle(color: Colors.purple.withOpacity(0.4)),
    suffix: Row(mainAxisSize: MainAxisSize.min, children: <Widget>[Text('關(guān)閉'), Icon(Icons.remove_red_eye)])));
  1. counter 系列為文本框右下角計(jì)數(shù)器，當(dāng)設(shè)置 maxLengths 時(shí)通常會(huì)在右下角展示編輯字符數(shù)與整體數(shù)量比，可通過(guò) counter 系列組件調(diào)整；counterText 為計(jì)數(shù)器展示內(nèi)容；counterStyle 為計(jì)數(shù)器樣式屬性；
return TextField(maxLength: 20,
    decoration: InputDecoration(counterText: '最大長(zhǎng)度不超過(guò)20', counterStyle: TextStyle(color: Colors.blueAccent)));
  1. filled 為文本框是否顏色填充，只有 true 時(shí)，filledColor 才生效；
return TextField(decoration: InputDecoration(fillColor: Colors.green.withOpacity(0.4), filled: true));
  1. enabled 為文本框是否可用，false 為不可用，無(wú)法獲取焦點(diǎn)；
return TextField(decoration: InputDecoration(enabled: false));
  1. alignLabelWithHint 用于 TextField 設(shè)置多行時(shí)，true 時(shí)覆蓋將標(biāo)簽與 TextField 的中心對(duì)齊的默認(rèn)行為，小菜嘗試了多種情況下 true 和 false 狀態(tài)，發(fā)現(xiàn)效果并不明顯，有待繼續(xù)研究；
return TextField(maxLines: null, decoration: InputDecoration(
  alignLabelWithHint: true, labelText: '用戶(hù)名：',
  hintMaxLines: null, helperText: '請(qǐng)輸入手機(jī)號(hào)或郵箱!',
  hintText: '請(qǐng)輸入用戶(hù)名信息!請(qǐng)輸入用戶(hù)名信息!請(qǐng)輸入用戶(hù)名信息!請(qǐng)輸入用戶(hù)名信息!請(qǐng)輸入用戶(hù)名信息!請(qǐng)輸入用戶(hù)名信息!',
));
  1. border 為一個(gè)系列，包括各種環(huán)境下邊框；默認(rèn) border 為正常狀態(tài)下邊框；邊框基本包括三類(lèi)：

a. InputBorder 一般設(shè)置為無(wú)邊框樣式；

return TextField(decoration: InputDecoration(border: InputBorder.none));

b. UnderlineInputBorder 一般設(shè)置為底部一條直線(xiàn)邊框樣式；小菜測(cè)試時(shí)設(shè)置邊框圓角為 10dp 加上背景色效果更明顯；

return TextField(decoration: InputDecoration(
    filled: true, fillColor: Colors.green.withOpacity(0.4),
    border: UnderlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(10.0)),
        borderSide: BorderSide(color: Colors.purple, width: 4.0, style: BorderStyle.solid))));

c. OutlineInputBorder 一般設(shè)置為包圍的圓角邊框；相較于 UnderlineInputBorder 多了 gapPadding 屬性，用于浮動(dòng)的 labelText 與邊框的間距；

return TextField(decoration: InputDecoration(
    labelText: '用戶(hù)名：', labelStyle: TextStyle(color: Colors.purple),
    border: OutlineInputBorder(
        gapPadding: 10.0, borderRadius: BorderRadius.all(Radius.circular(10.0)), 
        borderSide: BorderSide(color: Colors.purple, width: 4.0, style: BorderStyle.solid))));

??????小菜測(cè)試發(fā)現(xiàn) UnderlineInputBorder 和 OutlineInputBorder 對(duì)于設(shè)置 border 邊框顏色無(wú)效，需要通過(guò) ThemeData 來(lái)更改屬性；

  1. enabledBorder 為可用時(shí)邊框樣式，enabled 為 true；

Tips:

  1. errorText 存在時(shí) enabledBorder 不生效；
  2. 若不設(shè)置其他 border 屬性，獲取焦點(diǎn)默認(rèn)是 ThemeData 中焦點(diǎn)邊框，設(shè)置 border 或 focusedBorder 等生效；
// UnderlineInputBorder 類(lèi)型且只設(shè)置 enabledBorder
return TextField(decoration: InputDecoration(filled: true,fillColor: Colors.green.withOpacity(0.4),
    enabledBorder: UnderlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.purple, width: 4.0))));
// UnderlineInputBorder 類(lèi)型且設(shè)置 enabledBorder 和 border
return TextField(decoration: InputDecoration(filled: true, fillColor: Colors.green.withOpacity(0.4),
    enabledBorder: UnderlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.purple, width: 4.0)),
    border: UnderlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)))));
// UnderlineInputBorder 類(lèi)型且 errorText 不為空
return TextField(decoration: InputDecoration(filled: true, fillColor: Colors.green.withOpacity(0.4),
    errorText: '請(qǐng)勿超過(guò) 11 位!', errorStyle: TextStyle(color: Colors.pink),
    enabledBorder: UnderlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.purple, width: 4.0)),
    border: UnderlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)))));
// OutlineInputBorder 類(lèi)型且只設(shè)置 enabledBorder
return TextField(decoration: InputDecoration(labelText: '用戶(hù)名：', labelStyle: TextStyle(color: Colors.purple),
    enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.purple.withOpacity(0.4), width: 3.0)),
    border: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)))));
// OutlineInputBorder 類(lèi)型設(shè)置 enabledBorder，且 errorText 不為空
return TextField(decoration: InputDecoration(labelText: '用戶(hù)名：', labelStyle: TextStyle(color: Colors.purple),
    errorText: '請(qǐng)勿超過(guò) 11 位!', errorStyle: TextStyle(color: Colors.pink),
    enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.purple.withOpacity(0.4), width: 3.0))));
// OutlineInputBorder 類(lèi)，設(shè)置 enabledBorder 和 border 且 errorText 不為空  
return TextField(decoration: InputDecoration(labelText: '用戶(hù)名：', labelStyle: TextStyle(color: Colors.purple),
    errorText: '請(qǐng)勿超過(guò) 11 位!', errorStyle: TextStyle(color: Colors.pink),
    enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.purple.withOpacity(0.4), width: 3.0)),
    border: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)))));
  1. disabledBorder 為不可用時(shí)邊框，enabled 為 false；且 errorText 存在時(shí) disabledBorder 不生效；
// UnderlineInputBorder 類(lèi)型
return TextField( decoration: InputDecoration(enabled: false,
    filled: true, fillColor: Colors.green.withOpacity(0.4),
    disabledBorder: UnderlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.pink, width: 4.0))));
// UnderlineInputBorder 類(lèi)型且設(shè)置 errorText
return TextField(decoration: InputDecoration(enabled: false,
    filled: true, fillColor: Colors.green.withOpacity(0.4),
    errorText: '請(qǐng)勿超過(guò) 11 位!', errorStyle: TextStyle(color: Colors.pink),
    disabledBorder: UnderlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.pink, width: 4.0)));
// OutlineInputBorder 類(lèi)型
return TextField(decoration: InputDecoration(enabled: false,
    labelText: '用戶(hù)名：', labelStyle: TextStyle(color: Colors.purple),
    disabledBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.green, width: 4.0))));
// OutlineInputBorder 類(lèi)型且設(shè)置 errorText
return TextField(decoration: InputDecoration(enabled: false,
    labelText: '用戶(hù)名：', labelStyle: TextStyle(color: Colors.purple),
    errorText: '請(qǐng)勿超過(guò) 11 位!', errorStyle: TextStyle(color: Colors.pink),
    disabledBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.pink, width: 4.0))));
  1. focusedBorder 為獲取焦點(diǎn)時(shí)邊框，errorText 存在時(shí) focusedBorder 不生效；
// UnderlineInputBorder 類(lèi)型
return TextField(decoration: InputDecoration(
    filled: true, fillColor: Colors.green.withOpacity(0.4),
    focusedBorder: UnderlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.pink, width: 4.0)),
    enabledBorder: UnderlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.purple, width: 4.0))));
// UnderlineInputBorder 類(lèi)型且設(shè)置 errorText
return TextField(decoration: InputDecoration(
    filled: true, fillColor: Colors.green.withOpacity(0.4),
    errorText: '請(qǐng)勿超過(guò) 11 位!', errorStyle: TextStyle(color: Colors.pink),
    focusedBorder: UnderlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.pink, width: 4.0)),
    enabledBorder: UnderlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.purple, width: 4.0))));
// OutlineInputBorder 類(lèi)型
return TextField(decoration: InputDecoration(
    labelText: '用戶(hù)名：', labelStyle: TextStyle(color: Colors.purple),
    enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.purple.withOpacity(0.4), width: 3.0)),
    focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.green, width: 4.0))));
// OutlineInputBorder 類(lèi)型且設(shè)置 errorText
return TextField(decoration: InputDecoration(
    labelText: '用戶(hù)名：', labelStyle: TextStyle(color: Colors.purple),
    errorText: '請(qǐng)勿超過(guò) 11 位!', errorStyle: TextStyle(color: Colors.pink),
    focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.pink, width: 4.0)),
    enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.purple.withOpacity(0.4), width: 3.0))));
  1. errorBorder 為 errorText 不為空且未獲取焦點(diǎn)時(shí)邊框；
// UnderlineInputBorder 類(lèi)型
return TextField(decoration: InputDecoration(
    filled: true, fillColor: Colors.green.withOpacity(0.4),
    errorText: '請(qǐng)勿超過(guò) 11 位!', errorStyle: TextStyle(color: Colors.pink),
    errorBorder: UnderlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.black.withOpacity(0.4), width: 4.0))));
// OutlineInputBorder 類(lèi)型
return TextField(decoration: InputDecoration(
    labelText: '用戶(hù)名：', labelStyle: TextStyle(color: Colors.purple),
    errorText: '請(qǐng)勿超過(guò) 11 位!', errorStyle: TextStyle(color: Colors.pink),
    errorBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.black.withOpacity(0.4), width: 3.0))));
  1. focusedErrorBorder 為 errorText 不為空且獲取焦點(diǎn)時(shí)邊框；
// UnderlineInputBorder 類(lèi)型
return TextField(decoration: InputDecoration(
    filled: true, fillColor: Colors.green.withOpacity(0.4),
    errorText: '請(qǐng)勿超過(guò) 11 位!', errorStyle: TextStyle(color: Colors.pink),
    focusedErrorBorder: UnderlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.teal, width: 4.0)),
    errorBorder: UnderlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.black, width: 4.0))));
// OutlineInputBorder 類(lèi)型
return TextField(decoration: InputDecoration(
    labelText: '用戶(hù)名：', labelStyle: TextStyle(color: Colors.purple),
    errorText: '請(qǐng)勿超過(guò) 11 位!', errorStyle: TextStyle(color: Colors.pink),
    focusedErrorBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.pink, width: 4.0)),
    errorBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.purple.withOpacity(0.4), width: 3.0))));

小擴(kuò)展

??????在實(shí)際開(kāi)發(fā)中，可能回隨時(shí)需要關(guān)閉鍵盤(pán)，此時(shí)我們僅需監(jiān)聽(tīng)一下即可；小菜監(jiān)聽(tīng)一個(gè)文本輸入框，當(dāng)輸入字符長(zhǎng)度大于 11 位時(shí)即收起鍵盤(pán)；

return TextField(controller: controller,
    decoration: InputDecoration(
        labelText: '用戶(hù)名：', labelStyle: TextStyle(color: Colors.purple),
        errorText: '請(qǐng)勿超過(guò) 11 位!', errorStyle: TextStyle(color: Colors.pink)));

void initState() {
  super.initState();
  controller.addListener(() {
    setState(() {
      if (controller.text.length >= 11) {
        // 收起鍵盤(pán)
        FocusScope.of(context).requestFocus(FocusNode());
      }
    });
  });
}

??????文本輸入框確實(shí)有很多細(xì)節(jié)需要研究和嘗試，小菜僅初步了解，有待深入研究；且小菜建議時(shí)常升級(jí) Flutter 版本，可能對(duì)于同一個(gè) Widget 會(huì)有或多或少的更新，如有問(wèn)題請(qǐng)多多指導(dǎo)！

來(lái)源： 阿策小和尚

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

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

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