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

源碼分析：

十多年的印臺網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整印臺建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)建站從事“印臺網(wǎng)站設(shè)計”,“印臺網(wǎng)站推廣”以來，每個客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

分析源碼可得，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)居左/居右/居中等；注意只是文字開始方向；textDirection 問文字內(nèi)容方向，從左向右或從右向左；

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

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

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

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

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

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

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

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

a. 數(shù)字鍵盤

--1-- datetime 鍵盤上可隨時訪問 : 和 /；

--2-- phone 鍵盤上可隨時訪問 # 和 *；

--3-- number 鍵盤上可隨時訪問 + - * /

b. 字母鍵盤

--1-- emailAddress 鍵盤上可隨時訪問 @ 和 .；

--2-- url 鍵盤上可隨時訪問 / 和 .；

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

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

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

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

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

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

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

16、inputFormatters 為格式驗(yàn)證，例如原生 Android 中通常會限制輸入手機(jī)號或其他特殊字符，在 Flutter 中也可以借此來進(jìn)行格式限制，包括正則表達(dá)式；使用時需要引入 package:flutter/services.dart；

a. LengthLimitingTextInputFormatter 限制最長字符；

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

c. BlacklistingTextInputFormatter 防止輸入黑名單中字符；如 singleLineFormatter 強(qiáng)制輸入單行；

分析源碼 RegExp("[/]") 可以設(shè)置正則表達(dá)式；

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

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

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

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

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

問題小結(jié)：

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

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

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

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

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

Flutter組件TextFormField詳解

TextFormField繼承自FormField，是flutter表單提交相關(guān)組件，類似于html中的 input type="text" / ，是個文本輸入框。需要在 Form 組件內(nèi)部使用，否則無法正確提交數(shù)據(jù)。

未完待續(xù)

跨平臺技術(shù)；H5和Flutter誰是未來？

前言

為什么跨平臺是發(fā)展趨勢？

同一個應(yīng)用，各個“端”獨(dú)立開發(fā)，不僅開發(fā)周期長，而且人員成本高。同時，作為技術(shù)人員，也不應(yīng)該滿足于這種重復(fù)、低能的工作狀態(tài)。在這樣的形勢下，跨平臺的技術(shù)方案也受到越來越多人和企業(yè)的關(guān)注。

本篇文章我將從原理、優(yōu)缺點(diǎn)等方面為大家分享跨平臺技術(shù)

一. H5

說到跨平臺，沒人不知道H5。不管是在Mac、Windows、Linux、iOS、Android還是其他平臺，只要給一個瀏覽器，連“月球”上它都能跑。

1.瀏覽器架構(gòu)

下面，我們來看看讓H5如此橫行霸道的瀏覽器的架構(gòu)：

瀏覽器由以上7個部分組成，而“渲染引擎”是性能優(yōu)化的重中之重，一起了解其中的渲染原理。

2.渲染引擎原理

不同的瀏覽器內(nèi)核不同，渲染過程會不太一樣，但主要流程還是一致的。

分為下面6步驟：

從以上6步，我們可以總結(jié)渲染優(yōu)化的要點(diǎn)：

以上就是瀏覽器端的內(nèi)容。但H5作為跨平臺技術(shù)的載體，是如何與不同平臺的App進(jìn)行交互的呢？這時候JSBridge就該出場了。

3.JSBridge原理

JSBridge，顧名思義，是JS和Native之間的橋梁，用來進(jìn)行JS和Native之間的通信。

通信分為以下兩個維度：

那么App內(nèi)加載H5的過程是什么樣的呢？

4.App打開H5過程

打開H5分為4個階段：

這四步，對應(yīng)的過程如上圖所以，我們可以針對性的做性能優(yōu)化。

5.優(yōu)缺點(diǎn)分析

下面，我們進(jìn)行H5的優(yōu)缺點(diǎn)分析：

優(yōu)點(diǎn)

缺點(diǎn)

雖然H5目前還存在不足，但隨著PWA、WebAssembly等技術(shù)的進(jìn)步，相信H5在未來能夠得到越來也好的發(fā)展。

二.小程序

2018年是微信小程序飛速發(fā)展的一年，19年，各大廠商快速跟進(jìn)，已經(jīng)有了很大的影響力。下面，我們以微信小程序?yàn)槔治鲂〕绦虻募夹g(shù)架構(gòu)。

小程序跟H5一樣，也是基于Webview實(shí)現(xiàn)。但它包含View視圖層、App Service邏輯層兩部分，分別獨(dú)立運(yùn)行在各自的WebView線程中。

1.View

可以理解為h5的頁面，提供UI渲染。由WAWebview.js來提供底層的功能,具體如下：

每個窗口都有一個獨(dú)立的WebView進(jìn)程，因此微信限制不能打開超過5個層級的頁面來保障用戶體驗(yàn)。

2. App Service

提供邏輯處理、數(shù)據(jù)請求、接口調(diào)用。由WAService.js來提供底層的功能,具體如下：

運(yùn)行環(huán)境：

僅有一個WebView進(jìn)程

3.View App Service通信

視圖層和邏輯層通過系統(tǒng)層的JSBridage進(jìn)行通信，邏輯層把數(shù)據(jù)變化通知到視圖層，觸發(fā)視圖層頁面更新，視圖層將觸發(fā)的事件通知到邏輯層進(jìn)行業(yè)務(wù)處理。

4. 優(yōu)缺點(diǎn)分析

優(yōu)點(diǎn)

缺點(diǎn)

既然WebView性能不佳，那有沒有更好的方案呢？下面我們看看React Native。

三.React Native

RN的理念是在不同平臺上編寫基于React的代碼，實(shí)現(xiàn)Learn once, write anywhere。

Virtual DOM在內(nèi)存中，可以通過不同的渲染引擎生成不同平臺下的UI，JS和Native之間通過Bridge通信

1.React Native 工作原理

在 React 框架中，JSX 源碼通過 React 框架最終渲染到了瀏覽器的真實(shí) DOM 中，而在 React Native 框架中，JSX 源碼通過 React Native 框架編譯后，與Native原生的UI組件進(jìn)行映射，用原生代替DOM元素來渲染，在UI渲染上非常接近Native App。

2.React Native 與Native平臺通信

3.優(yōu)缺點(diǎn)分析

優(yōu)點(diǎn)

缺點(diǎn)

4.RN展望

雖然RN還存在不足，但RN新版本已經(jīng)做了如下改進(jìn)，并且RN團(tuán)隊(duì)也在積極準(zhǔn)備大版本重構(gòu)，能否成為開發(fā)者們所信賴的跨平臺方案，讓我們拭目以待。

既然React Native在渲染方面還擺脫不了原生，那有沒有一種方案是直接操控GPU，自制引擎渲染呢，我們終于迎來了Flutter！

四.Flutter

Flutter是Google開發(fā)的一套全新的跨平臺、開源UI框架，支持iOS、Android系統(tǒng)開發(fā)，并且是未來新操作系統(tǒng)Fuchsia的默認(rèn)開發(fā)套件。渲染引擎依靠跨平臺的Skia圖形庫來實(shí)現(xiàn)，依賴系統(tǒng)的只有圖形繪制相關(guān)的接口，可以在最大程度上保證不同平臺、不同設(shè)備的體驗(yàn)一致性，邏輯處理使用支持AOT的Dart語言，執(zhí)行效率也比JavaScript高得多。

1.Flutter架構(gòu)原理

2.Dart優(yōu)勢

很多人會好奇，為什么Flutter要用Dart，而不是用JavaScript開發(fā)，這里列下Dart的優(yōu)勢

3.優(yōu)缺點(diǎn)分析

優(yōu)點(diǎn)

缺點(diǎn)