建站
咨詢
售后
建站咨詢
新聞中心
Flutter 仿抖音效果 (二) 界面布局
Flutter 仿抖音效果 (一) 全屏點愛星
在天津等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供網(wǎng)站制作、成都網(wǎng)站建設(shè) 網(wǎng)站設(shè)計制作按需策劃,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),營銷型網(wǎng)站建設(shè),成都外貿(mào)網(wǎng)站制作,天津網(wǎng)站建設(shè)費用合理。
Flutter 仿抖音效果 (二) 界面布局
[Flutter 仿抖音效果 (三) 視頻播放列表] ( )
項目地址: 持續(xù)效果更新
1.基本的布局是簡單的,外層通過Stack作為根
2.左邊點贊的控件組通過Align進行統(tǒng)一布局
3.頂部控件組通過Positioned進行布局,設(shè)置頂部距離,其實也可以用align,我們多使用幾種來習(xí)慣flutter的布局
4.底部同樣使用Positioned,設(shè)置底部距離
5.子頁面的左右滑動使用PageView,一開始我們要從推薦開始左滑到關(guān)注,可以使用reverse屬性,不需要更多額外的操作
1.pageController監(jiān)聽
刷新頂部的下劃線時,我們一樣使用StreamController刷新,這樣效率比setstate高很多
2.歌曲名走馬燈效果
這個效果看起來挺麻煩的其實實現(xiàn)起來超級的簡單用最普通的ListView就能快速的實現(xiàn)
首頁listview里面套入的是最簡單的container+text
listview添加一個ScrollController做為滑動的控制
使用一個定時器,把listview滑到最大的位置之后,在滑回去
先通過scroController.position.maxScrollExtent獲取最大位置,
然后通過scroController.animateTo進行滑動,因為我設(shè)置一次循環(huán)的時間是3000毫秒,所以滑過去和滑回來的時間各占一般 new Duration(milliseconds: (time * 0.5).toInt()),還有就是歌名沒有大于最大寬度時候其實我們不需要進行滑動,所以判斷maxScrollExtent是否大于0來確定是否進行滑動動畫
Flutter-布局
flutter布局需要先了解flutter所有布局的widget，首先flutter布局分為Container、RenderObjectWidget和ParentDataWidget。而RenderObject中經(jīng)常使用的有SingleChildRenderObjectWidget（單節(jié)點）和MultiChildRenderObjectWidget（多節(jié)點）。
flutter中基礎(chǔ)的widget，可以為子節(jié)點設(shè)置內(nèi)間距。當(dāng)padding沒有child的時候，它會產(chǎn)生一個寬為left+right，高為top+bottom的區(qū)域，當(dāng)padding的child不為空的時候會將約束傳遞給child。一般在使用間距的地方使用。
設(shè)置child的對齊方式，并根據(jù)child的尺寸調(diào)整自身的尺寸。
設(shè)置透明度
用于矩形圓角裁剪組件
用于圓形裁剪，但是可以添加陰影和Z軸
給組件繪制區(qū)域大小
百分比布局，可以通過widthFactor或者heightFactor設(shè)置寬高占比
子組件疊加布局,也稱絕對布局
mainAxisAlignment： start：頂頭 center：居中 end：接尾 spaceAround：中間的孩子均分,兩頭的孩子空一半 spaceBetween：頂頭接尾其他均分 spaceEvenly：均勻分布
crossAxisAlignment： start：頂頭 center：居中 end：接尾 stretch：伸展
mainAxisSize： max：父容器沒有約束的話，column自身會盡可能延伸 min：不會延伸，只會包裹自己
屬性和column屬性一致，只是方向不同，一個豎直方向一個水平方向。使用方法也類似。
Wrap可以實現(xiàn)流布局,單行的Wrap跟Row一樣,單列的Wrap則跟Colum一樣.但是Row和Column都是單行單列的,Wrap可以多行多列。
Wrap能做的事情，flow也能做。但是flow會比較復(fù)雜點。flow類似于OC中CollectionLayout，需要自己實現(xiàn)子組件的位置以及大小。但是flow的性能比較好，靈活。
自定義FlowDelegate
運行結(jié)果：
絕對定位布局,用于指定組件的具體位置
Expanded組件可以使row、column或者flex子組件在其主軸上展開并填充可用空間。如果多個組件展開的話，會按照比例分割。
Tip：Expanded組件要在row、column或者flex的子組件中使用。具有兩個屬性，child：子組件，flex：所占比例
Flutter 基礎(chǔ)控件之 Row 橫向布局 Column 縱向布局
Expanded 是自適應(yīng)屬性 會充滿屏幕
因為中間那個Text使用了 Expanded 所以 他把下面的Text擠到了最下面 這叫自適應(yīng)
Flutter開發(fā)--如何布局？
相對于iOS開發(fā)，F(xiàn)lutter的布局更具有靈活性，每個頁面設(shè)計都不一樣，相同頁面可選擇的布局方式也不一樣，如果單純的說應(yīng)該如何去布局，我覺得不現(xiàn)實，大家可以參考下 Flutter官方的布局教程 。接下來，筆者，通過項目中的一個頁面，來一步一步的拆解布局的流程。整個過程，基本上按照拆解、組件封裝、具體布局這三步來的。
根據(jù)設(shè)計圖，可以看出整體可以分成兩部分，上面一部分是系統(tǒng)介紹模塊，下面一部分是真正的登錄內(nèi)容，因為涉及到疊加，因此考慮用Stack；
系統(tǒng)介紹模塊部分：整體也是涉及到疊加，考慮用Stack，分為四部分。最底部漸變色背景用一個contanier，無須指定位置，全視圖擴展；載放logo圖標(biāo)在上一層，用Image。最后兩個Text同級放在最上層。Image，Text各用Positioned包裹去指定位置。
登錄內(nèi)容模塊是最外層是一個Contanier容器，去控制背景色和圓角。然后是一個Column元素，逐行排列。
第一行為Image，
第二行為Text，
第三行可以看成一個小Column，分兩塊進行布局
第四行可以看成一個小Column，分兩塊進行布局
第五行可以看作一個TextButton，
第六行可以看作一個Row，分三塊進行布局
通過上面這樣一步一步的分析后，基本上對大致的布局有了一個了解，最外層的控件大致選對（只要能實現(xiàn)的話，就是復(fù)雜度以及效率的問題），然后一步一步的拆解每一行的元素，如果有重復(fù)的或者覺得可以封裝出來的部分，則進行下一步。
每一行的拆解，大致也是按照這個思路來進行，因此筆者在這里就不做講解了。
在做到第三第四行的時候，發(fā)現(xiàn)這兩個很相似，而且設(shè)計到一些交互邏輯，筆者就想對第三第四行的這種展示進行封裝，覺得今后的布局可能會用到，因此在這一步，可以先把這一塊兒抽離出一個控件。利用TextField來實現(xiàn)這種輸入操作，具體的實現(xiàn)筆者不再詳細的描述了。
經(jīng)過這一步，整體的規(guī)劃設(shè)計圖已經(jīng)有了，各個組件也都有了，接下來的工作就是組裝了。
具體布局設(shè)計到一些細節(jié)的地方，例如整體Column的居中對齊（crossAxisAlignment）、間隔（Padding或Container包裹，筆者更喜歡用SizedBox占位）、居左居右居中（Align）、點擊事件（GestureDetector）以及圓角（BorderRadius）等一些特殊情況。
像第六行row是放在底部的，就可以在第六行前面增加一個Spacer()去填充空白區(qū)域。
對文字顏色大小等，可以用TextStyle直接設(shè)置。
對于輸入框的刪除按鈕，可以用Offstage這種Flutter特有的控制顯示隱藏的控件。
UIStackView使用介紹
在iOS開發(fā)中，對于控件布局我們一般是使用AutoLayout加約束的機制實現(xiàn)，UIKit有一個布局組件UIStackView，它與Flutter中的Column和Row有點類似，我們可以使用這個控件實現(xiàn)橫向或縱向上子視圖的布局。
首先來了解幾個重要的屬性：
- open var axis: NSLayoutConstraint.Axis
這個屬性有 horizontal 、 vertical 兩種值，代表橫向布局還是縱向布局子控件，默認是 horizontal 。設(shè)定了這個的屬性后，內(nèi)部的arrangedSubviews不需要添加主軸方向上的約束(指的是 vertical 時上下和 horizontal 時左右)。
- open var alignment: UIStackView.Alignment
這個屬性代表內(nèi)部arrangedSubviews的對齊方式, 默認.fill
- open var distribution: UIStackView.Distribution
這個屬性代表內(nèi)部arrangedSubviews的排布方式, 默認.fill。
我們使用UIStackView來布局內(nèi)部子view時，子視圖應(yīng)該以下面方法來添加或者移除. 因為看方法很直白所以就不解釋用法了，需要注意的是:
網(wǎng)頁題目：flutter橫向布局,flutter絕對布局
分享URL：http://fisionsoft.com.cn/article/phpidh.html
