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

相對于iOS開發(fā)，F(xiàn)lutter的布局更具有靈活性，每個頁面設計都不一樣，相同頁面可選擇的布局方式也不一樣，如果單純的說應該如何去布局，我覺得不現(xiàn)實，大家可以參考下 Flutter官方的布局教程 。接下來，筆者，通過項目中的一個頁面，來一步一步的拆解布局的流程。整個過程，基本上按照拆解、組件封裝、具體布局這三步來的。

創(chuàng)新互聯(lián)公司是一家朝氣蓬勃的網站建設公司。公司專注于為企業(yè)提供信息化建設解決方案。從事網站開發(fā)，網站制作，網站設計，網站模板，微信公眾號開發(fā)，軟件開發(fā)，小程序開發(fā)，10年建站對成都火鍋店設計等多個領域，擁有豐富的網站維護經驗。

根據(jù)設計圖，可以看出整體可以分成兩部分，上面一部分是系統(tǒng)介紹模塊，下面一部分是真正的登錄內容，因為涉及到疊加，因此考慮用Stack；

系統(tǒng)介紹模塊部分：整體也是涉及到疊加，考慮用Stack，分為四部分。最底部漸變色背景用一個contanier，無須指定位置，全視圖擴展；載放logo圖標在上一層，用Image。最后兩個Text同級放在最上層。Image，Text各用Positioned包裹去指定位置。

登錄內容模塊是最外層是一個Contanier容器，去控制背景色和圓角。然后是一個Column元素，逐行排列。

第一行為Image，

第二行為Text，

第三行可以看成一個小Column，分兩塊進行布局

第四行可以看成一個小Column，分兩塊進行布局

第五行可以看作一個TextButton，

第六行可以看作一個Row，分三塊進行布局

通過上面這樣一步一步的分析后，基本上對大致的布局有了一個了解，最外層的控件大致選對（只要能實現(xiàn)的話，就是復雜度以及效率的問題），然后一步一步的拆解每一行的元素，如果有重復的或者覺得可以封裝出來的部分，則進行下一步。

每一行的拆解，大致也是按照這個思路來進行，因此筆者在這里就不做講解了。

在做到第三第四行的時候，發(fā)現(xiàn)這兩個很相似，而且設計到一些交互邏輯，筆者就想對第三第四行的這種展示進行封裝，覺得今后的布局可能會用到，因此在這一步，可以先把這一塊兒抽離出一個控件。利用TextField來實現(xiàn)這種輸入操作，具體的實現(xiàn)筆者不再詳細的描述了。

經過這一步，整體的規(guī)劃設計圖已經有了，各個組件也都有了，接下來的工作就是組裝了。

具體布局設計到一些細節(jié)的地方，例如整體Column的居中對齊（crossAxisAlignment）、間隔（Padding或Container包裹，筆者更喜歡用SizedBox占位）、居左居右居中（Align）、點擊事件（GestureDetector）以及圓角（BorderRadius）等一些特殊情況。

像第六行row是放在底部的，就可以在第六行前面增加一個Spacer()去填充空白區(qū)域。

對文字顏色大小等，可以用TextStyle直接設置。

對于輸入框的刪除按鈕，可以用Offstage這種Flutter特有的控制顯示隱藏的控件。

Flutter初步探索（二）使用Tabs

在Material的設計準則里面，tabs是一個常用的模塊。Flutter里面包含了 material library 創(chuàng)建tab布局的簡便方法

為了使tab起作用，我們需要保持選中的tab和相關內容同步。這就是 TabController 的職責。

我們可以手動創(chuàng)建 TabController ，也可以使用 DefaultTabController 小部件。使用 DefaultTabController 是最簡單的選項，因為它將為我們創(chuàng)建一個 TabController ，并使它可用于所有子類Widget。

現(xiàn)在我們已經有個一個 TabController ,我們可以 TabBar Widget去使用創(chuàng)建我們的tab。在這個示例中，我們將會在一個 AppBar 下.創(chuàng)建一個包含3個 Tab Widgets 的 TabBar 。

默認情況下， TabBar 在Widget樹中查找最近的 DefaultTabController 。如果是手動創(chuàng)建的 TabController ，則需要將其傳遞到“TabBar”。

既然我們有了選項卡，那么我們就需要在選擇選項卡時顯示相關的內容。因此，我們將使用 TabBarView Widget.

備注： 順序很重要，必須與 TabBar 中的選項卡的順序相對應！

1. Flutter初步探索（二）使用Tabs

1. Working with Tabs

Flutter開發(fā)--視頻播放器

目前Flutter平臺主流的兩個播放器是video_player和fijkplayer

pub

github

1、Flutter平臺官方插件，作者是國外的，有問題溝通比較困難，只能通過提交issue

2、硬解碼

4、UI封裝： better_player

基于video_player和Chewie的高級視頻播放器。它解決了許多典型的用例，并且易于運行。

5、播放器寬高比例與視頻內容寬高比例不一致時，會出現(xiàn)圖像壓縮變形的問題

6、調用原生內核播放器：iOS--AVPlayer， Android--ExoPlayer

7、對于分段源 m3u8 的播放不友好，如果一個切片播放超時，會導致整個播放都失敗

8、better_player可以緩存視頻，但不能自定義緩存的地址，只能指定key，和緩存的最大內存量（還未研究超出最大的話是不能緩存新的，還是刪除最舊的）

9、better_player不能完全自定義UI，只能修改類中的一些開放屬性，比如說icon圖標，文字顏色啥的

10、無網絡有緩存時，封面可以正常展示

11、better_player播放失敗有手動retry的設計

pub

github

1、fijkplayer 是一個 Flutter 生態(tài)的媒體播放器，是對 ijkplayer 的 Flutter 封裝，支持 Android 和 iOS。 fijkplayer 使用 ijkplayer 作為播放器內核，ijkplayer 使用 ffmpeg 進行音視頻解封裝和解碼，同時添加了 Android 和 iOS 平臺特有的硬件加速解碼能力。

2 、國內有QQ群，但是活躍度也是不高。

3、可以緩存視頻，可以自定義緩存的地址，方便后續(xù)的內存維護。

4、可以通過FijkPanelWidgetBuilder較大程度上自定義UI。

5、無網絡有緩存視頻時，無法展示封面，因為內部是通過imageProvider去加載網絡圖片的。

7、播放失敗無手動retry的設計

1、兩種播放器都是通過外接紋理方案 (Texture)，將播放器視頻畫面渲染接入 flutter 中，性能上優(yōu)于 PlatformView 的接入方法。

如何自己實現(xiàn)？

下面以video_palyer的iOS源碼部分解釋：

iOS用CVPixelBufferRef將渲染出來的數(shù)據(jù)存在內存中，F(xiàn)lutter engine會將Texture的數(shù)據(jù)在內存中直接進行映射無需通過Channel傳輸，然后Texture Widget就可以把你提供的這些數(shù)據(jù)顯示出來。在我們傳輸數(shù)據(jù)的時候會需要將其與 TextureID 綁定，綁定的過程通過BasicMessageChannel實現(xiàn)數(shù)據(jù)流的傳輸，以做到實時展示的效果

Flutter 設置Container高度自適應GridView 或Listview

在做移動端的時候, 很多時候會需要下圖所示的需求,如圖 自己所示：

先進行需求分析, 這個模塊可以設計成Container包含GridView, ?GridView中子內容個數(shù)由后臺數(shù)據(jù)控制, 但是在直接寫Container包含GridView控件時會出現(xiàn) "Failed assertion: line 1920 pos 12: 'hasSize'" 有關的錯誤, 如果直接給Container一個高度的話, 又不滿足我們的需求.

我們想要的結果是由數(shù)據(jù)控制GridView的個數(shù), 而Container大小跟隨GridView個數(shù)的變化而變化, 而不去直接設置Container的大小,?

因此,我們點開GridView的api發(fā)現(xiàn), 有一個shrinkWrap屬性, ?設置shrinkWrap:true即可, 運行一下即可達到效果, 但是又會發(fā)現(xiàn)另一個問題, 雖然Container大小可以自適應了, 但是里面的內容又會在局部進行滾動, 而我們的想法是想讓內容在整個屏幕中滾動, 并沒有局部滾動的效果, 因此, 我們設置另一個屬性physics: NeverScrollableScrollPhysics()

在GridView.builder中添加

Container跟隨GridView內容變化高度： shrinkWrap:true,? ??

取消滾動效果： physics:NeverScrollableScrollPhysics(),

Flutter筆記(三)：設置白色狀態(tài)欄

在App設計中狀態(tài)欄純色的這種設計很常見，但是如果狀態(tài)欄需要為白色的時候就必須為黑色字體。在Android中已經有很多成熟的方案來處理這種情況，那我們現(xiàn)在看看在Flutter中這種情況該怎么處理。

這里的ThemeData即為控制App的主題，primarySwatch設置即可控制主題的各類顏色，但是這里的顏色是需要MaterialColor，但是純色種的黑色和白色不是MaterialColor。所以不能設置primarySwatch為Colors.white。

注：MaterialColor包含以下這些

那么就只能使用其他方式設置主題為白色。即為設置

此時我們可以看到App的狀態(tài)欄如下所示（Android）

雖然AppBar變成了白色，但是狀態(tài)欄是灰色顯然不是我們想要的。

嘗試設置文字顏色，AppBar的Brightness有兩種模式light和dark

這個和SystemUiOverlayStyle的light和dark剛好相反

然后設置狀態(tài)欄顏色

設置為紅色之后，得到以下的樣式，可以看到狀態(tài)欄為紅色了，文字為白色

那么接下來我們只需要將狀態(tài)欄設置為白色或者透明，狀態(tài)欄文字設置為黑色。

最后得到以下視圖

注：使用PreferredSize包裹，可以更得心應手哦！

SystemUiOverlayStyle在設置時其實有很多系統(tǒng)或者版本的限制

[Flutter]使用主題

flutter設置沉浸式狀態(tài)欄

）

名稱欄目：flutter設計,flutter開發(fā)技巧
網頁地址：http://chinadenli.net/article15/dsgggdi.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供微信小程序、域名注冊、企業(yè)網站制作、網站營銷、做網站、網站制作

廣告

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