2020-11-18 解決Flutter TextField限制輸入中文問(wèn)題

項(xiàng)目中存在一個(gè)輸入框，只能提交中文字符串，于是使用了如下的方法實(shí)現(xiàn)

創(chuàng)新互聯(lián)2013年開(kāi)創(chuàng)至今，先為廊坊等服務(wù)建站，廊坊等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為廊坊企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

但是上線運(yùn)行之后，發(fā)現(xiàn)在iOS原生拼音輸入法中，只能一個(gè)字一個(gè)字輸入，每次輸入超過(guò)一個(gè)字就會(huì)直接變成拼音字母，并且長(zhǎng)度限制在遇到中文拼音輸入法后也會(huì)失效

于是通過(guò)自定義過(guò)濾器的方法，解決了這個(gè)問(wèn)題

關(guān)鍵方法在于判斷當(dāng)前輸入框是否存在未完成的字符串，如果存在，則不做限制，否則根據(jù)參數(shù)進(jìn)行限制

但是屬性 composing 聽(tīng)說(shuō)還存在bug，使用的時(shí)候要注意，很有可能還有坑等著????

參考：

解決方案：

頓悟：

感謝???? Alex 大神！！！

Flutter 之 輸入框TextField

Material組件庫(kù)中提供了輸入框組件TextField

TextField用于文本輸入，它提供了很多屬性，我們先簡(jiǎn)單介紹一下主要屬性的作用，然后通過(guò)幾個(gè)示例來(lái)演示一下關(guān)鍵屬性的用法。

prefix和prefixText 以及suffix和suffixText 不能同時(shí)存在

獲取輸入內(nèi)容

通過(guò)onChange回調(diào)

通過(guò)controller監(jiān)聽(tīng)

_controller .addListener(() {

print(_controller .text);

});

兩種方式相比，onChanged是專門用于監(jiān)聽(tīng)文本變化，而controller的功能卻多一些，除了能監(jiān)聽(tīng)文本變化外，它還可以設(shè)置默認(rèn)值、選擇文本

這里我們就用到了focusNode

焦點(diǎn)可以通過(guò)FocusNode和FocusScopeNode來(lái)控制，默認(rèn)情況下，焦點(diǎn)由FocusScope來(lái)管理，它代表焦點(diǎn)控制范圍，可以在這個(gè)范圍內(nèi)可以通過(guò)FocusScopeNode在輸入框之間移動(dòng)焦點(diǎn)、設(shè)置默認(rèn)焦點(diǎn)等。我們可以通過(guò)FocusScope.of(context) 來(lái)獲取Widget樹(shù)中默認(rèn)的FocusScopeNode。

Flutter實(shí)戰(zhàn)

Flutter-02編譯器選擇

1.打開(kāi) VS Code。

2.打開(kāi) 查看 命令面板…。

3.輸入 “install”，然后選擇 擴(kuò)展: 安裝擴(kuò)展(就是點(diǎn)擊選擇第一行內(nèi)容)。

4.在擴(kuò)展搜索輸入框中輸入 “flutter”，然后在列表中選擇 Flutter 并單擊 安裝。此過(guò)程中會(huì)自動(dòng)安裝必需的 Dart 插件。（選擇第一行并安裝）

5.退出然后重新啟動(dòng) VS Code。

1.打開(kāi) 查看 命令面板…。

2.輸入 “doctor”，選擇 Flutter: Run Flutter Doctor。

3.打開(kāi) 輸出 (OUTPUT) 面板查看是否有錯(cuò)誤，確保在不同的輸出選項(xiàng) (Output Options) 的下拉列表中選擇了 Flutter。

我們?cè)谏掀恼乱呀?jīng)用命令行創(chuàng)建了一個(gè) my_app 的flutter項(xiàng)目了，這里我們就可以使用 vscode 打開(kāi)看看了

創(chuàng)建新項(xiàng)目 ，則是在命令面板輸 flutter , 選擇 Flutter: New Application Project

運(yùn)行項(xiàng)目 ，找到 VS Code 的狀態(tài)欄(窗口底部藍(lán)色的條)

1.打開(kāi) Android Studio。

2.打開(kāi)插件設(shè)置（在 v3.6.3.0 以上的系統(tǒng)打開(kāi) Configure Plugins）。

這里需要先改一下網(wǎng)絡(luò)請(qǐng)求的設(shè)置

3.然后搜索Flutter 插件，選擇并點(diǎn)擊 安裝。

4.當(dāng)彈出安裝 Dart 插件提示時(shí)，點(diǎn)擊 Yes。

5.退出重新啟動(dòng)編譯器，然后在編譯器主頁(yè)面就可以看到多了了 create new flutter project 可供選擇，代表flutter插件安裝成功，我們?cè)囍c(diǎn)擊來(lái)創(chuàng)建一個(gè)新項(xiàng)目。

Flutter TextField 文本輸入框的基本屬性及詳解

源碼分析：

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

1、光標(biāo)的相關(guān)屬性；cursorColor 為光標(biāo)顏色，cursorWidth 為光標(biāo)寬度，cursorRadius 為光標(biāo)圓角；其中 Radius 提供了 circle 圓角和 elliptical 非圓角兩種；

2、textAlign 為文字起始位置，可根據(jù)業(yè)務(wù)光標(biāo)居左/居右/居中等；注意只是文字開(kāi)始方向；textDirection 問(wèn)文字內(nèi)容方向，從左向右或從右向左；

3、maxLength 為字符長(zhǎng)度，設(shè)置時(shí)默認(rèn)是展示一行，且右下角有編輯長(zhǎng)度與整體長(zhǎng)度對(duì)比；與 maxLengthEnforced 配合，maxLengthEnforced 為 true 時(shí)達(dá)到最大字符長(zhǎng)度后不可編輯；為 false 時(shí)可繼續(xù)編輯展示有差別；

4、設(shè)置 maxLength 之后右下角默認(rèn)有字符計(jì)數(shù)器，設(shè)置 TextField.noMaxLength 即可只展示輸入字符數(shù)；

5、maxLines 為允許展現(xiàn)的最大行數(shù)，在使用 maxLength 時(shí)內(nèi)容超過(guò)一行不會(huì)自動(dòng)換行，因?yàn)槟J(rèn) maxLines=1，此時(shí)設(shè)置為 null 或固定展示行數(shù)即可自動(dòng)換行；區(qū)別在于 null 會(huì)展示多行，而 maxLines 最多只展示到設(shè)置行數(shù)；

6、obscureText 是否隱藏編輯內(nèi)容，常見(jiàn)的密碼格式；

7、enableInteractiveSelection 長(zhǎng)按是否出現(xiàn)【剪切/復(fù)制/粘貼】菜單；不可為空；

8、keyboardAppearance 為鍵盤亮度，包括 Brightness.dark/light 兩種，但僅限于 iOS 設(shè)備；

9、textCapitalization 文字大小寫；理論上 sentences 為每句話第一個(gè)字母大寫；characters為每個(gè)字母大寫；words 為每個(gè)單詞首字母大寫；但該屬性僅限于 text keybord，和尚在本地更換多種方式并未實(shí)現(xiàn)，有待研究；

10、keyboardType 為鍵盤類型，和尚理解整體分為數(shù)字鍵盤和字母鍵盤等；根據(jù)設(shè)置的鍵盤類型，鍵盤會(huì)有差別；

a. 數(shù)字鍵盤

--1-- datetime 鍵盤上可隨時(shí)訪問(wèn) : 和 /；

--2-- phone 鍵盤上可隨時(shí)訪問(wèn) # 和 *；

--3-- number 鍵盤上可隨時(shí)訪問(wèn) + - * /

b. 字母鍵盤

--1-- emailAddress 鍵盤上可隨時(shí)訪問(wèn) @ 和 .；

--2-- url 鍵盤上可隨時(shí)訪問(wèn) / 和 .；

--3-- multiline 適用于多行文本換行；

--4-- text 默認(rèn)字母鍵盤；

11、textInputAction 通常為鍵盤右下角操作類型，類型眾多，建議多多嘗試；

12、autofocus 是否自動(dòng)獲取焦點(diǎn)，進(jìn)入頁(yè)面優(yōu)先獲取焦點(diǎn)，并彈出鍵盤，若頁(yè)面中有多個(gè) TextField 設(shè)置 autofocus 為 true 則優(yōu)先獲取第一個(gè)焦點(diǎn)；

13、focusNode 手動(dòng)獲取焦點(diǎn)，可配合鍵盤輸入等減少用戶操作次數(shù)，直接獲取下一個(gè) TextField 焦點(diǎn)；

14、enabled 設(shè)為 false 之后 TextField 為不可編輯狀態(tài)；

15、decoration 為邊框修飾，可以借此來(lái)調(diào)整 TextField 展示效果；可以設(shè)置前置圖標(biāo)，后置圖片，邊框?qū)傩裕瑑?nèi)容屬性等，會(huì)在后續(xù)集中嘗試；若要完全刪除裝飾，將 decoration 設(shè)置為空即可；

16、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á)式；

17、onChanged 文本內(nèi)容變更時(shí)回調(diào)，可實(shí)時(shí)監(jiān)聽(tīng) TextField 輸入內(nèi)容；

18、controller 文本控制器，監(jiān)聽(tīng)輸入內(nèi)容回調(diào)；

19、onTap 點(diǎn)擊 TextField時(shí)回調(diào)；

20、onEditingComplete 在提交內(nèi)容時(shí)回調(diào)，通常是點(diǎn)擊回車按鍵時(shí)回調(diào)；

21、onSubmit 在提交時(shí)回調(diào)，不可與 onEditingComplete 同時(shí)使用，區(qū)別在于 onSubmit 是帶返回值的回調(diào)；

問(wèn)題小結(jié)：

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

（1）在 pubspec.yaml 中集成 flutter_localizations；

2）在 MaterialApp 中設(shè)置本地化代理和支持的語(yǔ)言類型；

（1）將 maxLength 設(shè)置為 null 僅使用 LengthLimitingTextInputFormatter 限制最長(zhǎng)字符；

（2）設(shè)置 InputDecoration 中 decoration 屬性為空；但是底部有空余，只是隱藏而并非消失；

flutter TextField限制輸入為合法小數(shù)

對(duì)于金額等的輸入，常常要求TextField限制輸入為小數(shù)，可使用以下約束：

但這種限制會(huì)有問(wèn)題，比如可以輸入 0.1.1 這種其實(shí)就不是小數(shù)了，并且不能限制小數(shù)點(diǎn)的輸入位數(shù)。

繼承TextInputFormatter類，重寫formatEditUpdate方法：

溫馨提示：

demo傳送門

4. VS Code創(chuàng)建flutter項(xiàng)目

如果和我一樣，用慣了VS Code來(lái)開(kāi)發(fā)項(xiàng)目的話，那就跟我一起來(lái)配置一下如何在VS Code里運(yùn)行flutter項(xiàng)目。

1.在VS Code里安裝擴(kuò)展：

2.在VScode上打開(kāi)打開(kāi)終端，快捷鍵：Ctrl+~（Tab上一個(gè)鍵），在終端上輸入：flutter create flutter_app02，即可創(chuàng)建完成！

也可以把之前的項(xiàng)目放到工作區(qū)

3.在終端中運(yùn)行命令：flutter run

運(yùn)行的時(shí)候你會(huì)發(fā)現(xiàn)手機(jī)提示你安裝個(gè)app，點(diǎn)擊安裝完成，項(xiàng)目就在手機(jī)上顯示了，下圖是運(yùn)行成功的提示。

下圖是手機(jī)效果：

如果報(bào)錯(cuò)的話，運(yùn)行下清緩存的命令：flutter clean，把文件夾.gradle刪掉，然后flutter run重新跑下項(xiàng)目。

網(wǎng)站名稱：flutter輸入,flutter輸入法開(kāi)發(fā)
網(wǎng)站URL：http://chinadenli.net/article26/dsgjcjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、網(wǎng)站改版、網(wǎng)站制作、App開(kāi)發(fā)、企業(yè)網(wǎng)站制作、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)