Flutter：Row中文字太長導致溢出

Text("long text...") 中文字過長會換行顯示。

成都創(chuàng)新互聯(lián)長期為成百上千客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為崖州企業(yè)提供專業(yè)的成都網(wǎng)站建設、網(wǎng)站設計，崖州網(wǎng)站改版等技術服務。擁有10多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

但如果放置在Row()中 Row(children:[Text("long text...")]) 文字就不會換行顯示，還可能會報錯某一側長度溢出了多少像素。

這時給Text組件包裹一層Expanded就可以換行顯示。

Row(children:[Expanded(child:Text("long text..."))])

或者用Flexible 也可以。

Row(children:[Flexible (child:Text("long text..."))])

Expanded/Flexible 會限制Row的寬度不要那么長。

一文解決Flutter中使用TextField遇到的各種疑難雜癥

可以使用 SingleChildScrollView 包裹布局

這里還需要了解一個 Scaffold 中的一個屬性 resizeToAvoidBottomInset

官方文檔給出的解釋就是處理鍵盤遮擋問題，默認是 true，如果不希望頂起需要設置為 false。

在 sdk 低版本的時候是使用 resizeToAvoidBottomPadding 需要將其設置為 false，現(xiàn)在已經(jīng)棄用。但網(wǎng)上很多文章還沒有改正，仍然用的 resizeToAvoidBottomPadding。

分兩種情況

一種是使用系統(tǒng)的返回鍵，比如 android 底部導航自帶的返回，

另一種是使用導航欄自定義的返回鍵

第一種情況需要在頁面根布局使用 WillPopScope 在 onWillPop 中攔截返回處理。

原理都是通過判斷輸入框是否獲取了焦點

當?shù)撞坑泄潭ǖ慕M件，比如提交按鈕，我們在鍵盤彈起的時候希望按鈕貼著鍵盤頂部固定，但是中間滾動視圖可以自由滾動

可以在 SingleChildScrollView 外部再使用 Stack 包裹，懸浮按鈕使用 Positioned 定位，

還要??注意要給滾動組件底部留出距離防遮擋，同時還有動態(tài)加上 bottomBar 的高度，因為在 iphoneX 以上的手機，會有個虛擬按鍵，如果不加上該按鍵高度，同樣會被遮擋

高度獲取方法： MediaQuery.of(context).padding.bottom

在 showDialog 布局中使用 Scaffold 包裹，不要忘了將 backgroundColor 設為透明。

如果彈窗過高，還是需要將高度固定，然后使用 SingleChildScrollView ，彈窗中同樣也可以在執(zhí)行關閉的時候攔截，判斷鍵盤是否彈起，如果彈起則要先關閉鍵盤。

給所有輸入框綁定 FoucusNode

在 maxLines=1 的情況下，輸入框不支持換行，換行按鈕會變成 done

監(jiān)聽 onEditingComplete 方法

根布局使用 GestureDetector 或者 InkWell 包裹，點擊的時候收起鍵盤。

最后要記得銷毀

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

源碼分析：

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

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

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

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

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

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

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

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 展示效果；可以設置前置圖標，后置圖片，邊框屬性，內容屬性等，會在后續(xù)集中嘗試；若要完全刪除裝飾，將 decoration 設置為空即可；

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

a. LengthLimitingTextInputFormatter 限制最長字符；

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

c. BlacklistingTextInputFormatter 防止輸入黑名單中字符；如 singleLineFormatter 強制輸入單行；

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

17、onChanged 文本內容變更時回調，可實時監(jiān)聽 TextField 輸入內容；

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

19、onTap 點擊 TextField時回調；

20、onEditingComplete 在提交內容時回調，通常是點擊回車按鍵時回調；

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

問題小結：

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

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

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

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

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

Flutter 之 流式布局（Wrap、Flow）

流式布局在移動端是非常常見的，比如商品列表，瀑布流、標簽頁等等

Flutter 中提供了兩種流式布局Wrap和Flow

Wrap可以進行水平方向或者垂直方向上的布局,在一行或者一列現(xiàn)實不完所有的widgets的時候，能夠根據(jù)當前寬度或者高度自動換行。

alignment 不管設置什么屬性都不能調整第一行的位置

包裹一個Container來看，當前Wrap沒有占滿全屏

把Container占滿全屏才表現(xiàn)下面效果

我們一般很少會使用Flow，因為其過于復雜，需要自己實現(xiàn)子組件的位置轉換，所以在很多場景下首先要考慮的是Wrap是否滿足需求。Flow主要用于一些需要自定義布局策略或性能要求較高（如動畫中）的場景。