Flutter 64: 圖解基本 TextField 文本輸入框 (一)

??????小菜最近在學(xué)習(xí)基礎(chǔ)的 Flutter Widget，原因在于很多基礎(chǔ)的組件有很多容易忽視的注意事項(xiàng)，了解并熟悉后對(duì)整體的開發(fā)認(rèn)知會(huì)有所提升；今天小菜學(xué)習(xí)一下 TextField 文本輸入框；

源碼分析

const TextField({
    Key key,
    this.controller,                    // 控制正在編輯文本
    this.focusNode,                     // 獲取鍵盤焦點(diǎn)
    this.decoration = const InputDecoration(),              // 邊框裝飾
    TextInputType keyboardType,         // 鍵盤類型
    this.textInputAction,               // 鍵盤的操作按鈕類型
    this.textCapitalization = TextCapitalization.none,      // 配置大小寫鍵盤
    this.style,                         // 輸入文本樣式
    this.textAlign = TextAlign.start,   // 對(duì)齊方式
    this.textDirection,                 // 文本方向
    this.autofocus = false,             // 是否自動(dòng)對(duì)焦
    this.obscureText = false,           // 是否隱藏內(nèi)容，例如密碼格式
    this.autocorrect = true,            // 是否自動(dòng)校正
    this.maxLines = 1,                  // 最大行數(shù)
    this.maxLength,                     // 允許輸入的最大長(zhǎng)度
    this.maxLengthEnforced = true,      // 是否允許超過輸入最大長(zhǎng)度
    this.onChanged,                     // 文本內(nèi)容變更時(shí)回調(diào)
    this.onEditingComplete,             // 提交內(nèi)容時(shí)回調(diào)
    this.onSubmitted,                   // 用戶提示完成時(shí)回調(diào)
    this.inputFormatters,               // 驗(yàn)證及格式
    this.enabled,                       // 是否不可點(diǎn)擊
    this.cursorWidth = 2.0,             // 光標(biāo)寬度
    this.cursorRadius,                  // 光標(biāo)圓角弧度
    this.cursorColor,                   // 光標(biāo)顏色
    this.keyboardAppearance,            // 鍵盤亮度
    this.scrollPadding = const EdgeInsets.all(20.0),        // 滾動(dòng)到視圖中時(shí)，填充邊距
    this.enableInteractiveSelection,    // 長(zhǎng)按是否展示【剪切/復(fù)制/粘貼菜單LengthLimitingTextInputFormatter】
    this.onTap,                         // 點(diǎn)擊時(shí)回調(diào)
})

??????分析源碼可得，TextField 是有狀態(tài) StatefulWidget，有豐富的屬性，自定義化較高，實(shí)踐中需要合理利用各種回調(diào)；

案例嘗試

  1. 小菜嘗試最基本的 TextField，區(qū)分默認(rèn)狀態(tài)和獲取焦點(diǎn)狀態(tài)；
return TextField();
  1. 小菜嘗試了光標(biāo)的相關(guān)屬性；cursorColor 為光標(biāo)顏色，cursorWidth 為光標(biāo)寬度，cursorRadius 為光標(biāo)圓角；其中 Radius 提供了 circle 圓角和 elliptical 非圓角兩種；
return TextField(cursorColor: Colors.purple.withOpacity(0.4), cursorWidth: 10.0, cursorRadius: Radius.circular(4.0));
  1. textAlign 為文字起始位置，可根據(jù)業(yè)務(wù)光標(biāo)居左/居右/居中等；注意只是文字開始方向；textDirection 問文字內(nèi)容方向，從左向右或從右向左；
return TextField(style: TextStyle(color: Colors.purple.withOpacity(0.7), fontSize: 18.0), textAlign: TextAlign.right);
  1. maxLength 為字符長(zhǎng)度，設(shè)置時(shí)默認(rèn)是展示一行，且右下角有編輯長(zhǎng)度與整體長(zhǎng)度對(duì)比；與 maxLengthEnforced 配合，maxLengthEnforced 為 true 時(shí)達(dá)到最大字符長(zhǎng)度后不可編輯；為 false 時(shí)可繼續(xù)編輯展示有差別；
return TextField(maxLength: 30, maxLengthEnforced: true);
return TextField(maxLength: 30, maxLengthEnforced: false);
true
false
  1. 設(shè)置 maxLength 之后右下角默認(rèn)有字符計(jì)數(shù)器，設(shè)置 TextField.noMaxLength 即可只展示輸入字符數(shù)；
return TextField(maxLength: TextField.noMaxLength);
  1. maxLines 為允許展現(xiàn)的最大行數(shù)，在使用 maxLength 時(shí)內(nèi)容超過一行不會(huì)自動(dòng)換行，因?yàn)槟J(rèn) maxLines=1，此時(shí)設(shè)置為 null 或固定展示行數(shù)即可自動(dòng)換行；區(qū)別在于 null 會(huì)展示多行，而 maxLines 最多只展示到設(shè)置行數(shù)；
return TextField(maxLength: 130, maxLengthEnforced: false, maxLines: null);
return TextField(maxLength: 130, maxLengthEnforced: false, maxLines: 2);
maxLines: null
maxLines: 2
  1. obscureText 是否隱藏編輯內(nèi)容，常見的密碼格式；
return TextField(obscureText: true);
  1. enableInteractiveSelection 長(zhǎng)按是否出現(xiàn)【剪切/復(fù)制/粘貼】菜單；不可為空；
return TextField(enableInteractiveSelection: false);
  1. keyboardAppearance 為鍵盤亮度，包括 Brightness.dark/light 兩種，但僅限于 iOS 設(shè)備；
return TextField(keyboardAppearance: Brightness.dark);
  1. textCapitalization 文字大小寫；理論上 sentences 為每句話第一個(gè)字母大寫；characters 為每個(gè)字母大寫；words 為每個(gè)單詞首字母大寫；但該屬性僅限于 text keybord，小菜在本地更換多種方式并未實(shí)現(xiàn)，有待研究；
return TextField(textCapitalization: TextCapitalization.sentences);
  1. keyboardType 為鍵盤類型，小菜理解整體分為數(shù)字鍵盤和字母鍵盤等；根據(jù)設(shè)置的鍵盤類型，鍵盤會(huì)有差別；

a. 數(shù)字鍵盤
--1-- datetime 鍵盤上可隨時(shí)訪問 : 和 /；
--2-- phone 鍵盤上可隨時(shí)訪問 # 和 *；
--3-- number 鍵盤上可隨時(shí)訪問 + - * /

b. 字母鍵盤
--1-- emailAddress 鍵盤上可隨時(shí)訪問 @ 和 .；
--2-- url 鍵盤上可隨時(shí)訪問 / 和 .；
--3-- multiline 適用于多行文本換行；
--4-- text 默認(rèn)字母鍵盤；

return TextField(keyboardType: TextInputType.number);
return TextField(keyboardType: TextInputType.emailAddress);
數(shù)字鍵盤

字母鍵盤
  1. textInputAction 通常為鍵盤右下角操作類型，小菜以前稍微整理過，類型眾多，建議多多嘗試；
return TextField(textInputAction: TextInputAction.search);
  1. autofocus 是否自動(dòng)獲取焦點(diǎn)，進(jìn)入頁(yè)面優(yōu)先獲取焦點(diǎn)，并彈出鍵盤，若頁(yè)面中有多個(gè) TextField 設(shè)置 autofocus 為 true 則優(yōu)先獲取第一個(gè)焦點(diǎn)；
return TextField(autofocus: true);
  1. focusNode 手動(dòng)獲取焦點(diǎn)，可配合鍵盤輸入等減少用戶操作次數(shù)，直接獲取下一個(gè) TextField 焦點(diǎn)；
FocusScope.of(context).requestFocus(node);

return TextField(focusNode: node);
  1. enabled 設(shè)為 false 之后 TextField 為不可編輯狀態(tài)；
return TextField(enabled: false);
  1. decoration 為邊框修飾，可以借此來(lái)調(diào)整 TextField 展示效果；可以設(shè)置前置圖標(biāo)，后置圖片，邊框?qū)傩?，?nèi)容屬性等，小菜會(huì)在后續(xù)集中嘗試；若要完全刪除裝飾，將 decoration 設(shè)置為空即可；
return TextField(decoration: InputDecoration(icon: Icon(Icons.android)));
  1. inputFormatters 為格式驗(yàn)證，例如原生 Android 中通常會(huì)限制輸入手機(jī)號(hào)或其他特殊字符，在 Flutter 中也可以借此來(lái)進(jìn)行格式限制，包括正則表達(dá)式；使用時(shí)需要引入 package:flutter/services.dart；

a. LengthLimitingTextInputFormatter 限制最長(zhǎng)字符；

b. WhitelistingTextInputFormatter 僅允許輸入白名單中字符；如 digitsOnly 僅支持?jǐn)?shù)字 [0-9]；

c. BlacklistingTextInputFormatter 防止輸入黑名單中字符；如 singleLineFormatter 強(qiáng)制輸入單行；分析源碼 RegExp("[/\]") 可以設(shè)置正則表達(dá)式；

return TextField(inputFormatters: <TextInputFormatter>[
  LengthLimitingTextInputFormatter(12),
  WhitelistingTextInputFormatter.digitsOnly,
  BlacklistingTextInputFormatter.singleLineFormatter
]);
  1. onChanged 文本內(nèi)容變更時(shí)回調(diào)，可實(shí)時(shí)監(jiān)聽 TextField 輸入內(nèi)容；
Center(child: Text(_textStr))

return TextField(onChanged: (text) {
  setState(() {
    _textStr = text;
  });
});
  1. controller 文本控制器，監(jiān)聽輸入內(nèi)容回調(diào)；
TextEditingController controller = TextEditingController();

@override
void initState() {
  super.initState();
  controller.addListener(() {
    setState(() {
      _textStr = controller.text;
    });
  });
}

return TextField(controller: controller);
  1. onTap 點(diǎn)擊 TextField時(shí)回調(diào)；
return TextField(
  onTap: () {
    Toast.show('onTap!', context, duration: Toast.LENGTH_SHORT, gravity: Toast.TOP);
  },
);
  1. onEditingComplete 在提交內(nèi)容時(shí)回調(diào)，通常是點(diǎn)擊回車按鍵時(shí)回調(diào)；
return TextField(
  onEditingComplete: () {
    Toast.show('onEditingComplete!', context, duration: Toast.LENGTH_SHORT, gravity: Toast.CENTER);
  },
);
  1. onSubmit 在提交時(shí)回調(diào)，不可與 onEditingComplete 同時(shí)使用，區(qū)別在于 onSubmit 是帶返回值的回調(diào)；
return TextField(
  onEditingComplete: () {
    Toast.show('onSubmitted -> $text!', context, duration: Toast.LENGTH_SHORT, gravity: Toast.CENTER);
  },
);

問題小結(jié)

1. 鍵盤彈出會(huì)把輸入框或其它組件頂上去？

??????當(dāng) TextField 獲取焦點(diǎn)彈出輸入框時(shí)，輸入框可能會(huì)將頁(yè)面中元素頂上去，為避免此情況，可將 Scaffold 中 resizeToAvoidBottomPadding: false 即可，resizeToAvoidBottomPadding 設(shè)置是否自動(dòng)調(diào)整body屬性控件的大小，以避免 Scaffold 底部被覆蓋；

resizeToAvoidBottomPadding: false

resizeToAvoidBottomPadding: true

2. 長(zhǎng)按輸入框出現(xiàn)【剪切/復(fù)制/粘貼】的菜單如何設(shè)置中文？

??????當(dāng) TextField 設(shè)置 enableInteractiveSelection 屬性后長(zhǎng)按會(huì)出現(xiàn)菜單，默認(rèn)為英文，可通過設(shè)置 Flutter 國(guó)際化來(lái)處理；

  1. 在 pubspec.yaml 中集成 flutter_localizations；
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  1. 在 MaterialApp 中設(shè)置本地化代理和支持的語(yǔ)言類型；
return MaterialApp(
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('zh', 'CN'),
    const Locale('en', 'US'),
  ]
}

3. 使用 maxLength 時(shí)如何取消文本框右下角字符計(jì)數(shù)器？

  1. 將 maxLength 設(shè)置為 null 僅使用 LengthLimitingTextInputFormatter 限制最長(zhǎng)字符；
return TextField(maxLength: null, inputFormatters: <TextInputFormatter>[
  LengthLimitingTextInputFormatter(10)
]);
  1. 設(shè)置 InputDecoration 中 **** 屬性為空；但是底部有空余，只是隱藏而并非消失；
return TextField(decoration: InputDecoration(counterText: ""), maxLength: 10);

??????文本框是日常開發(fā)中必不可少的組件，小菜還在探索過程中，如有問題請(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)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

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