Flutter 之 Sliver 系列控件

SliverAppBar 控件，一個 MD 的 AppBar 。屬性和 AppBar 類似，但做的效果比 AppBar 更加強大。相同的屬性具體可以看 Flutter 之 Scaffold 控件 ， 里面有 AppBar 控件的介紹。那么還有些沒有的屬性：

從策劃到設計制作，每一步都追求做到細膩，制作可持續(xù)發(fā)展的企業(yè)網(wǎng)站。為客戶提供成都網(wǎng)站設計、成都網(wǎng)站制作、網(wǎng)站策劃、網(wǎng)頁設計、域名申請、虛擬空間、網(wǎng)絡營銷、VI設計、 網(wǎng)站改版、漏洞修補等服務。為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案,以客戶的口碑塑造優(yōu)易品牌,攜手廣大客戶,共同發(fā)展進步。

結合 elevation 使用，當elevation 不為 0 的時候，是否顯示陰影

AppBar 展開時候的高度

true 的時候下滑AppBar優(yōu)先滑動展示，展示完成后才給滑動控件滑動

snap 為 true, 則 floating 也要為 true 。true 的時候根據(jù)手指松開的位置展開或者收縮AppBar

appBar 收縮到最小高度的時候 appBar 是否可見

SliverAppBar 往往做為 CustomScrollView 的第一個子元素，根據(jù)滾動控件的偏移量或者浮動的位置來改變 SliverAppBar 的高度。所以具體用法如下

另外在上面設計到 FlexibleSpaceBar 控件，F(xiàn)lexibleSpaceBar 有個 collapseMode 屬性

為 Sliver 系列控件添加一個 padding 。如給上面 SliverAppBar 添加一個 Padding 。

多行多列的列表控件，相當于 Android 的 GridView，有兩個屬性

SliverChildDelegate，這里有兩種方式創(chuàng)建

SliverGridDelegate，也是有兩種方式創(chuàng)建

結合上面展示效果

和上面 delegate 屬性一樣，需要創(chuàng)建一個 SliverChildDelegate 。

比 SliverList 多一個 itemExtent 屬性，設置 item 的高度 。item 里面的子控件無法再改動高度。

上面 SliverAppBar 就是結合 SliverPersistentHeader 實現(xiàn)的效果，SliverPersistentHeader 需要一個 SliverPersistentHeaderDelegate 。 實現(xiàn) SliverPersistentHeaderDelegate 有 4 個方法需要重寫

至于效果，具體效果具體分析。

有一個 Widget 屬性，主要作用是在 CustomScrollView 里面添加多種不同布局的樣式。

占滿一屏或者比一屏更多的布局，

滑動剩余部分展示的布局

flutter textfield邏輯行實際顯示了多少行

1行。fluttertextfield里minLines代表最少多少行，默認為null，maxLines代表最多多少行，邏輯行實際默認為1行，這也是為什么要將maxLines特意設置為空的原因了。

Flutter基礎篇之八-Expanded

? Expanded 使用與類似與Column，Row，F(xiàn)lex等展示多個組件集合的組件，Expanded包含的組件可以占據(jù)剩余的空間。

?屏幕左邊是文字,最右邊是一個按鈕，文字數(shù)據(jù)是服務器數(shù)據(jù)返回的，且多行顯示。

舉例：1:2:1

Flutter開發(fā)--如何布局？

相對于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特有的控制顯示隱藏的控件。

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

源碼分析：

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

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 為邊框修飾，可以借此來調(diào)整 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)容變更時回調(diào)，可實時監(jiān)聽 TextField 輸入內(nèi)容；

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

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

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

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

問題小結：

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

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

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

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

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

標題名稱：flutter多行,flutter多語言切換
URL網(wǎng)址：http://chinadenli.net/article36/phispg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設、品牌網(wǎng)站制作、自適應網(wǎng)站、網(wǎng)站維護、手機網(wǎng)站建設、網(wǎng)站排名

廣告

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