Flutter-Text文本組件

在開(kāi)發(fā)中，文本是我們最常接觸的控件。這篇博客來(lái)分享一下 Flutter 中的 Text 文本組件，我們展示的文本都可以用這個(gè)組件來(lái)展示，希望看文章的小伙伴有所幫助。

創(chuàng)新互聯(lián)是一家專注于做網(wǎng)站、成都網(wǎng)站制作與策劃設(shè)計(jì),鐵鋒網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:鐵鋒等地區(qū)。鐵鋒做網(wǎng)站價(jià)格咨詢:18982081108

這樣我們就可以在界面當(dāng)中顯示一個(gè)文本，顯示是 Hello Flutter 。下面我們來(lái)說(shuō)說(shuō) Text 組件的屬性：

設(shè)置文本顏色：

設(shè)置文本大?。?/p>

設(shè)置文本樣式-加粗：

設(shè)置文本樣式-斜體：

設(shè)置文本位置：

TextAlign可選屬性： center 、 end 、 start 、 justify 、 left 、 right 。

設(shè)置文本高度：

設(shè)置文本最大行數(shù)：

設(shè)置文本有下劃線：

設(shè)置文本有虛線類型下劃線：

設(shè)置文字間隔：

文本超過(guò)最大行數(shù)設(shè)置 ... ：

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 為鍵盤(pán)亮度，包括 Brightness.dark/light 兩種，但僅限于 iOS 設(shè)備；

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

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

a. 數(shù)字鍵盤(pán)

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

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

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

b. 字母鍵盤(pán)

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

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

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

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

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

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

13、focusNode 手動(dòng)獲取焦點(diǎn)，可配合鍵盤(pá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組件TextFormField詳解

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

未完待續(xù)

3. Flutter - 基礎(chǔ)組件 之 Text

Text繼承自 StatelessWidget ，Text 主要通過(guò)設(shè)置 文本布局 及 文本樣式 控制顯示方式。

1. 文本布局： 例如文本對(duì)齊方式 textAlign 、文本排版方向 textDirection ，文本顯示最大行數(shù) maxLines 、文本截?cái)嘁?guī)則 overflow 等等

2 文本樣式： 如字體名稱 fontFamily 、字體大小 fontSize 、文本顏色 color 、文本陰影 shadows 等等，這些參數(shù)被統(tǒng)一封裝到了構(gòu)造函數(shù)中的參數(shù) style(TextStyle) 中

??在iOS中，我們可以使用NSAttributedString進(jìn)行富文本設(shè)置。在Flutter中 我們可以通過(guò) Text.rich() 或 RichText() 進(jìn)行富文本設(shè)置。

兩者均為 InlineSpan 類型， InlineSpan 為抽象類。

抽象類不能直接實(shí)例化。Flutter已為我們提供了

且 WidgetSpan 繼承自 PlaceholderSpan