在開發(fā)中，文本是我們最常接觸的控件。這篇博客來分享一下 Flutter 中的 Text 文本組件，我們展示的文本都可以用這個組件來展示，希望看文章的小伙伴有所幫助。
成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比朗縣網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式朗縣網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們，業(yè)務覆蓋朗縣地區(qū)。費用合理售后完善，十載實體公司更值得信賴。
這樣我們就可以在界面當中顯示一個文本，顯示是 Hello Flutter 。下面我們來說說 Text 組件的屬性：
設置文本顏色：
設置文本大?。?/p>
設置文本樣式-加粗：
設置文本樣式-斜體：
設置文本位置：
TextAlign可選屬性： center 、 end 、 start 、 justify 、 left 、 right 。
設置文本高度：
設置文本最大行數(shù)：
設置文本有下劃線：
設置文本有虛線類型下劃線：
設置文字間隔：
文本超過最大行數(shù)設置 ... ：
主要是關注decoration (裝飾) 可以設置container的屬性，這里color指的是背景色
alertdialog會返回一個結果，這樣可以通過switch或其他方法做多次彈框等其他操作
Flutter支持穩(wěn)定的桌面設備開發(fā)已經(jīng)一段時間了，不得不說，F(xiàn)lutter多平臺支持的特性真的很香。我本人并沒有任何桌面開發(fā)的經(jīng)驗，但仍然使用Flutter開發(fā)出了一個桌面版小程序，功能很簡單，就是對輸入的json做格式化處理和轉模型。
話不多說，先來看看實際效果。 項目源碼地址
開發(fā)環(huán)境如下：
Flutter : 2.8.1
Dart : 2.15.1
IDE : VSCode
JSON作為我們?nèi)粘ｉ_發(fā)工作中經(jīng)常要打交道的一種數(shù)據(jù)格式，它共有6種數(shù)據(jù)類型： null , num , string , object , array , bool 。我們勢必對它又愛又恨。愛他因為他作為數(shù)據(jù)處理的一種格式確實非常方便簡潔。但是在我們做Flutter開發(fā)中，又需要接觸到json解析時，就會感覺非常棘手，因為flutter沒有反射，導致json轉模型這塊需要手寫那繁雜的映射關系。就像下面這樣子。
數(shù)據(jù)量少還能接受，一旦量大，那么光手寫這個解析方法都能讓你懷疑人生。更何況手寫還有出錯的可能。好在官方有個工具**json_serializable**可以自動生成這塊轉換代碼，也解決了flutter界json轉模型的空缺。當然，業(yè)界也有專門解析json的網(wǎng)站，可以自動生成dart代碼，使用者在生成后復制進項目中即可，也是非常方便的。
本項目以json解析為切入點，和大家一起來看下flutter是如何開發(fā)桌面應用的。
要讓我們的flutter項目支持桌面設備。我們首先需要修改下flutter的設置。如下，讓我們的項目支持 windows 和 macos 系統(tǒng)。
接下來使用 flutter create 命令創(chuàng)建我們的模版工程。
創(chuàng)建完項目后，我們就可以 run 起來了。
先來看下整體界面，界面四塊，分別為功能模塊、文件選擇模塊、輸入模塊、輸出模塊。
我們在新建一個桌面應用時，默認的模版又一個Appbar，此時應用可以用鼠標拖拽移動，放大縮小，還可以縮到很小。但是，我們一旦去掉這個導航欄，那么窗口就不能用鼠標拖動了，并且我們往往不希望用戶將我們的窗口縮放的很小，這會導致頁面異常，一些重要信息都展示不全。因此這里需要借助第三方組件 bitsdojo_window 。通過 bitsdojo_window ，我們可以實現(xiàn)窗口的定制化，拖動，最小尺寸，最大尺寸，窗口邊框，窗口頂部放大、縮小、關閉的按鈕等。
通過 InkWell 組件，可以捕捉到手勢、鼠標、觸控筆的移動和停留位置
這個功能是鼠標移動后的UI交互界面。要在窗口上顯示一個提示框，可以使用 Overlay 。需要注意的是，由于在 Overlay 上的 text 的根結點不是 Material 風格的組件，因此會出現(xiàn)黃色的下劃線。因此一定要用 Material 包一下 text 。并且你必須給創(chuàng)建的 OverlayEntry 一個位置，否則它將全屏顯示。
讀取說表拖拽的文件一開始想嘗試使用 InkWell 組件，但是這個組件無法識別拖拽中的鼠標，并且也無法從中拿到文件信息。因此放棄。后來從文章《Flutter-2天寫個桌面端APP》中發(fā)現(xiàn)一個可讀取拖拽文件的組件 desktop_drop ，能滿足要求。
使用開源組件 file_picker ，選完圖片后的操作和拖拽選擇圖片后的操作一致。
Textfield 如果要顯示富文本，那么需要自定義 TextEditingController 。并重寫 buildTextSpan 方法。
在做導出功能時遇到下列報錯，保存提示為沒有權限訪問對應目錄下的文件。
通過Apple的開發(fā)文檔找到有關權限問題的說明。其中有個授權私鑰的key為 com.apple.security.files.downloads.read-write ，表示 對用戶的下載文件夾的讀/寫訪問權限 。那么，使用Xcode打開Flutter項目中的mac應用，修改工程目錄下的 DebugProfile.entitlements 文件，向 entitlements 文件中添加 com.apple.security.files.downloads.read-write ，并將值設置為YES，保存后重啟Flutter項目。發(fā)現(xiàn)已經(jīng)可以向下載目錄中讀寫文件了。
當然，這是正常操作。還有個騷操作就是關閉系統(tǒng)的沙盒機制。將 entitlements 文件的 App Sandbox 設置為NO。這樣我們就可以訪問任意路徑了。當然關閉應用的沙盒也就相當于關閉了應用的防護機制，因此這個選項慎用。
原文地址：
TextFormField繼承自FormField，是flutter表單提交相關組件，類似于html中的 input type="text" / ，是個文本輸入框。需要在 Form 組件內(nèi)部使用，否則無法正確提交數(shù)據(jù)。
未完待續(xù)
源碼分析：
分析源碼可得，TextField 是有狀態(tài) StatefulWidget，有豐富的屬性，自定義化較高，實踐中需要合理利用各種回調；
1、光標的相關屬性；cursorColor 為光標顏色，cursorWidth 為光標寬度，cursorRadius 為光標圓角；其中 Radius 提供了 circle 圓角和 elliptical 非圓角兩種；
2、textAlign 為文字起始位置，可根據(jù)業(yè)務光標居左/居右/居中等；注意只是文字開始方向；textDirection 問文字內(nèi)容方向，從左向右或從右向左；
3、maxLength 為字符長度，設置時默認是展示一行，且右下角有編輯長度與整體長度對比；與 maxLengthEnforced 配合，maxLengthEnforced 為 true 時達到最大字符長度后不可編輯；為 false 時可繼續(xù)編輯展示有差別；
4、設置 maxLength 之后右下角默認有字符計數(shù)器，設置 TextField.noMaxLength 即可只展示輸入字符數(shù)；
5、maxLines 為允許展現(xiàn)的最大行數(shù)，在使用 maxLength 時內(nèi)容超過一行不會自動換行，因為默認 maxLines=1，此時設置為 null 或固定展示行數(shù)即可自動換行；區(qū)別在于 null 會展示多行，而 maxLines 最多只展示到設置行數(shù)；
6、obscureText 是否隱藏編輯內(nèi)容，常見的密碼格式；
7、enableInteractiveSelection 長按是否出現(xiàn)【剪切/復制/粘貼】菜單；不可為空；
8、keyboardAppearance 為鍵盤亮度，包括 Brightness.dark/light 兩種，但僅限于 iOS 設備；
9、textCapitalization 文字大小寫；理論上 sentences 為每句話第一個字母大寫；characters為每個字母大寫；words 為每個單詞首字母大寫；但該屬性僅限于 text keybord，和尚在本地更換多種方式并未實現(xiàn)，有待研究；
10、keyboardType 為鍵盤類型，和尚理解整體分為數(shù)字鍵盤和字母鍵盤等；根據(jù)設置的鍵盤類型，鍵盤會有差別；
a. 數(shù)字鍵盤
--1-- datetime 鍵盤上可隨時訪問 : 和 /；
--2-- phone 鍵盤上可隨時訪問 # 和 *；
--3-- number 鍵盤上可隨時訪問 + - * /
b. 字母鍵盤
--1-- emailAddress 鍵盤上可隨時訪問 @ 和 .；
--2-- url 鍵盤上可隨時訪問 / 和 .；
--3-- multiline 適用于多行文本換行；
--4-- text 默認字母鍵盤；
11、textInputAction 通常為鍵盤右下角操作類型，類型眾多，建議多多嘗試；
12、autofocus 是否自動獲取焦點，進入頁面優(yōu)先獲取焦點，并彈出鍵盤，若頁面中有多個 TextField 設置 autofocus 為 true 則優(yōu)先獲取第一個焦點；
13、focusNode 手動獲取焦點，可配合鍵盤輸入等減少用戶操作次數(shù)，直接獲取下一個 TextField 焦點；
14、enabled 設為 false 之后 TextField 為不可編輯狀態(tài)；
15、decoration 為邊框修飾，可以借此來調整 TextField 展示效果；可以設置前置圖標，后置圖片，邊框屬性，內(nèi)容屬性等，會在后續(xù)集中嘗試；若要完全刪除裝飾，將 decoration 設置為空即可；
16、inputFormatters 為格式驗證，例如原生 Android 中通常會限制輸入手機號或其他特殊字符，在 Flutter 中也可以借此來進行格式限制，包括正則表達式；使用時需要引入 package:flutter/services.dart；
a. LengthLimitingTextInputFormatter 限制最長字符；
b. WhitelistingTextInputFormatter 僅允許輸入白名單中字符；如 digitsOnly 僅支持數(shù)字 [0-9]；
c. BlacklistingTextInputFormatter 防止輸入黑名單中字符；如 singleLineFormatter 強制輸入單行；
分析源碼 RegExp("[/]") 可以設置正則表達式；
17、onChanged 文本內(nèi)容變更時回調，可實時監(jiān)聽 TextField 輸入內(nèi)容；
18、controller 文本控制器，監(jiān)聽輸入內(nèi)容回調；
19、onTap 點擊 TextField時回調；
20、onEditingComplete 在提交內(nèi)容時回調，通常是點擊回車按鍵時回調；
21、onSubmit 在提交時回調，不可與 onEditingComplete 同時使用，區(qū)別在于 onSubmit 是帶返回值的回調；
問題小結：
當 TextField 設置 enableInteractiveSelection 屬性后長按會出現(xiàn)菜單，默認為英文，可通過設置 Flutter 國際化來處理；
（1）在 pubspec.yaml 中集成 flutter_localizations；
2）在 MaterialApp 中設置本地化代理和支持的語言類型；
（1）將 maxLength 設置為 null 僅使用 LengthLimitingTextInputFormatter 限制最長字符；
（2）設置 InputDecoration 中 decoration 屬性為空；但是底部有空余，只是隱藏而并非消失；
相對于iOS開發(fā)，F(xiàn)lutter的布局更具有靈活性，每個頁面設計都不一樣，相同頁面可選擇的布局方式也不一樣，如果單純的說應該如何去布局，我覺得不現(xiàn)實，大家可以參考下 Flutter官方的布局教程 。接下來，筆者，通過項目中的一個頁面，來一步一步的拆解布局的流程。整個過程，基本上按照拆解、組件封裝、具體布局這三步來的。
根據(jù)設計圖，可以看出整體可以分成兩部分，上面一部分是系統(tǒng)介紹模塊，下面一部分是真正的登錄內(nèi)容，因為涉及到疊加，因此考慮用Stack；
系統(tǒng)介紹模塊部分：整體也是涉及到疊加，考慮用Stack，分為四部分。最底部漸變色背景用一個contanier，無須指定位置，全視圖擴展；載放logo圖標在上一層，用Image。最后兩個Text同級放在最上層。Image，Text各用Positioned包裹去指定位置。
登錄內(nèi)容模塊是最外層是一個Contanier容器，去控制背景色和圓角。然后是一個Column元素，逐行排列。
第一行為Image，
第二行為Text，
第三行可以看成一個小Column，分兩塊進行布局
第四行可以看成一個小Column，分兩塊進行布局
第五行可以看作一個TextButton，
第六行可以看作一個Row，分三塊進行布局
通過上面這樣一步一步的分析后，基本上對大致的布局有了一個了解，最外層的控件大致選對（只要能實現(xiàn)的話，就是復雜度以及效率的問題），然后一步一步的拆解每一行的元素，如果有重復的或者覺得可以封裝出來的部分，則進行下一步。
每一行的拆解，大致也是按照這個思路來進行，因此筆者在這里就不做講解了。
在做到第三第四行的時候，發(fā)現(xiàn)這兩個很相似，而且設計到一些交互邏輯，筆者就想對第三第四行的這種展示進行封裝，覺得今后的布局可能會用到，因此在這一步，可以先把這一塊兒抽離出一個控件。利用TextField來實現(xiàn)這種輸入操作，具體的實現(xiàn)筆者不再詳細的描述了。
經(jīng)過這一步，整體的規(guī)劃設計圖已經(jīng)有了，各個組件也都有了，接下來的工作就是組裝了。
具體布局設計到一些細節(jié)的地方，例如整體Column的居中對齊（crossAxisAlignment）、間隔（Padding或Container包裹，筆者更喜歡用SizedBox占位）、居左居右居中（Align）、點擊事件（GestureDetector）以及圓角（BorderRadius）等一些特殊情況。
像第六行row是放在底部的，就可以在第六行前面增加一個Spacer()去填充空白區(qū)域。
對文字顏色大小等，可以用TextStyle直接設置。
對于輸入框的刪除按鈕，可以用Offstage這種Flutter特有的控制顯示隱藏的控件。
重慶分公司
重慶分公司
