flutter中流式布局

流式布局（Liquid）的特點(diǎn)（也叫"Fluid") 是頁(yè)面元素的寬度按照屏幕分辨率進(jìn)行適配調(diào)整，但整體布局不變。柵欄系統(tǒng)（網(wǎng)格系統(tǒng)），用戶標(biāo)簽等。在Flutter中主要有Wrap和Flow兩種Widget實(shí)現(xiàn)。

成都創(chuàng)新互聯(lián)公司專注于延邊朝鮮族企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,購(gòu)物商城網(wǎng)站建設(shè)。延邊朝鮮族網(wǎng)站建設(shè)公司,為延邊朝鮮族等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

在介紹Row和Colum時(shí)，如果子widget超出屏幕范圍，則會(huì)報(bào)溢出錯(cuò)誤，在Flutter中通過(guò)Wrap和Flow來(lái)支持流式布局，溢出部分則會(huì)自動(dòng)折行。

上述有很多屬性和Row的相同，其意義其實(shí)也是相同的，這里我就不一一介紹了，主要介紹下不同的屬性：

我們一般很少會(huì)使用Flow，因?yàn)槠溥^(guò)于復(fù)雜，需要自己實(shí)現(xiàn)子widget的位置轉(zhuǎn)換，在很多場(chǎng)景下首先要考慮的是Wrap是否滿足需求。Flow主要用于一些需要自定義布局策略或性能要求較高(如動(dòng)畫(huà)中)的場(chǎng)景。Flow有如下優(yōu)點(diǎn)：

我們對(duì)六個(gè)色塊進(jìn)行自定義流式布局：

實(shí)現(xiàn)TestFlowDelegate:

可以看到我們主要的任務(wù)就是實(shí)現(xiàn)paintChildren，它的主要任務(wù)是確定每個(gè)子widget位置。由于Flow不能自適應(yīng)子widget的大小，我們通過(guò)在getSize返回一個(gè)固定大小來(lái)指定Flow的大小，實(shí)現(xiàn)起來(lái)還是比較麻煩的。

Flutter 仿抖音效果 (二) 界面布局

Flutter 仿抖音效果 (一) 全屏點(diǎn)愛(ài)星

Flutter 仿抖音效果 (二) 界面布局

[Flutter 仿抖音效果 (三) 視頻播放列表] ( )

項(xiàng)目地址: 持續(xù)效果更新

1.基本的布局是簡(jiǎn)單的,外層通過(guò)Stack作為根

2.左邊點(diǎn)贊的控件組通過(guò)Align進(jìn)行統(tǒng)一布局

3.頂部控件組通過(guò)Positioned進(jìn)行布局,設(shè)置頂部距離,其實(shí)也可以用align,我們多使用幾種來(lái)習(xí)慣flutter的布局

4.底部同樣使用Positioned,設(shè)置底部距離

5.子頁(yè)面的左右滑動(dòng)使用PageView,一開(kāi)始我們要從推薦開(kāi)始左滑到關(guān)注,可以使用reverse屬性,不需要更多額外的操作

1.pageController監(jiān)聽(tīng)

刷新頂部的下劃線時(shí),我們一樣使用StreamController刷新,這樣效率比setstate高很多

2.歌曲名走馬燈效果

這個(gè)效果看起來(lái)挺麻煩的其實(shí)實(shí)現(xiàn)起來(lái)超級(jí)的簡(jiǎn)單用最普通的ListView就能快速的實(shí)現(xiàn)

首頁(yè)listview里面套入的是最簡(jiǎn)單的container+text

listview添加一個(gè)ScrollController做為滑動(dòng)的控制

使用一個(gè)定時(shí)器,把listview滑到最大的位置之后,在滑回去

先通過(guò)scroController.position.maxScrollExtent獲取最大位置,

然后通過(guò)scroController.animateTo進(jìn)行滑動(dòng),因?yàn)槲以O(shè)置一次循環(huán)的時(shí)間是3000毫秒,所以滑過(guò)去和滑回來(lái)的時(shí)間各占一般 new Duration(milliseconds: (time * 0.5).toInt()),還有就是歌名沒(méi)有大于最大寬度時(shí)候其實(shí)我們不需要進(jìn)行滑動(dòng),所以判斷maxScrollExtent是否大于0來(lái)確定是否進(jìn)行滑動(dòng)動(dòng)畫(huà)

Flutter 之 流式布局（Wrap、Flow）

流式布局在移動(dòng)端是非常常見(jiàn)的，比如商品列表，瀑布流、標(biāo)簽頁(yè)等等

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

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

alignment 不管設(shè)置什么屬性都不能調(diào)整第一行的位置

包裹一個(gè)Container來(lái)看，當(dāng)前Wrap沒(méi)有占滿全屏

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

我們一般很少會(huì)使用Flow，因?yàn)槠溥^(guò)于復(fù)雜，需要自己實(shí)現(xiàn)子組件的位置轉(zhuǎn)換，所以在很多場(chǎng)景下首先要考慮的是Wrap是否滿足需求。Flow主要用于一些需要自定義布局策略或性能要求較高（如動(dòng)畫(huà)中）的場(chǎng)景。

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

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

根據(jù)設(shè)計(jì)圖，可以看出整體可以分成兩部分，上面一部分是系統(tǒng)介紹模塊，下面一部分是真正的登錄內(nèi)容，因?yàn)樯婕暗蒋B加，因此考慮用Stack；

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

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

第一行為Image，

第二行為T(mén)ext，

第三行可以看成一個(gè)小Column，分兩塊進(jìn)行布局

第四行可以看成一個(gè)小Column，分兩塊進(jìn)行布局

第五行可以看作一個(gè)TextButton，

第六行可以看作一個(gè)Row，分三塊進(jìn)行布局

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

每一行的拆解，大致也是按照這個(gè)思路來(lái)進(jìn)行，因此筆者在這里就不做講解了。

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

經(jīng)過(guò)這一步，整體的規(guī)劃設(shè)計(jì)圖已經(jīng)有了，各個(gè)組件也都有了，接下來(lái)的工作就是組裝了。

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

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

對(duì)文字顏色大小等，可以用TextStyle直接設(shè)置。

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

標(biāo)題名稱：flutter布局wp,flutter架構(gòu)設(shè)計(jì)
網(wǎng)站路徑：http://chinadenli.net/article48/phgshp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站導(dǎo)航、營(yíng)銷型網(wǎng)站建設(shè)、服務(wù)器托管、小程序開(kāi)發(fā)、虛擬主機(jī)

廣告

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