真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

flutter滾動特效,flutter 懸浮按鈕

Flutter:手把手教你使用滾動型列表組件:ListView

ListView的基礎創(chuàng)建使用有三種方式:

目前創(chuàng)新互聯(lián)建站已為超過千家的企業(yè)提供了網(wǎng)站建設、域名、網(wǎng)頁空間、網(wǎng)站托管運營、企業(yè)網(wǎng)站設計、武義網(wǎng)站維護等服務,公司將堅持客戶導向、應用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長,共同發(fā)展。

通過默認構(gòu)造函數(shù)來創(chuàng)建列表,應用場景 = 短列表

這種方式創(chuàng)建的列表存在一個問題:對于那些長列表或者需要較昂貴渲染開銷的子組件,即使還沒有出現(xiàn)在屏幕中但仍然會被ListView所創(chuàng)建,這將是一項較大的開銷,使用不當可能引起性能問題甚至卡頓。

長列表

列表子項之間需要分割線

ListView的進階使用主要包括:下拉刷新 上拉加載

在Flutter中,ListView結(jié)合RefreshIndicator組件實現(xiàn)下拉刷新

通過包裹一層RefreshIndicator,自定義onRefresh回調(diào)方法實現(xiàn)

方式有兩種:

通過ListView.controller屬性可以判斷ListView是否滑動到了底部,再進行上拉加載

NotificationListener是一個Widget,可監(jiān)聽子Widget發(fā)出的Notification

ListView在滑動時中會發(fā)出ScrollNotification類型的通知,可通過監(jiān)聽該通知得到ListView的滑動狀態(tài),判斷是否滑動到了底部,從而進行上拉加載

NotificationListener有一個onNotification屬性,定義了監(jiān)聽的回調(diào)方法,通過它來處理加載更多邏輯

不定期分享關(guān)于 安卓開發(fā) 的干貨,追求 短、平、快 ,但 卻不缺深度 。

Flutter 橫向滾動標簽

要實現(xiàn)上面的效果,每個種類的標簽橫向滾動,實現(xiàn)的方式,最外層的大分類標簽一個ListView,每個分類的標簽也是ListView 設置橫向滾動結(jié)合Wrap組件就能實現(xiàn)。

Flutter CustomScrollView 自定義滑動效果

基本和AppBar一樣,只是他只能在CustomScrollView中使用,應該很常見,滑動的時候固定appbar,就需要用到他.

大部分和appbar一樣,主要說下重要的幾個:

是否將導航欄部分固定在appbar的位置.這個需求在實際中很常用. 看看效果圖.

當 pinned = false:

可以看到appbar并沒有固定在最上面,而是根據(jù)內(nèi)容劃出了界面.

當 pinned = true :

這個應該是需求中經(jīng)常用到的效果了.

當floating = false :

當floating = true:

仔細看 ,區(qū)別是在列表整體向下滑動時,appbar開始顯示的位置不同.

當為false時 ,向下滑動時,會先降列表內(nèi)容滑動頂部,然后appbar會跟著列表滑動顯示出來.如上圖

當為true時, 向下滑動時,appbar會先跟著列表滑動顯示出來. 然后繼續(xù)列表的滑動. 如上圖

不能單獨使用要配合 ****floating 和 ****pinned

具體效果看官網(wǎng)地址

是否展開,默認false,直接看值為true的效果圖,就明白了.

可以再里面添加擴展的內(nèi)容:

通過測試發(fā)現(xiàn) **后面不是 FlexibleSpaceBar 的話, stretch = true 無效. **

和Padding一樣.子控件是 sliver 類型...

上圖中在padding中添加了一個背景色為青色的容器widget

里面可以設置不是 sliver 類型的widget。如上圖中的 padding中添加的 container

就兩個協(xié)議,一個是布局協(xié)議一個展示協(xié)議.基本和GridView一樣.也有count和extext... 不設置個數(shù)默認無數(shù)個

SliverChildListDelegate 這種方式前提是知道cell個數(shù),比較少,好搭建

SliverChildBuilderDelegate 這種方式,可以根據(jù)數(shù)組去創(chuàng)建,不知道cell個數(shù)

和listview差不多.也是協(xié)議 不設置個數(shù)默認無數(shù)個

Flutter 仿京東商品詳情頁嵌套滾動組件

這是領(lǐng)苗確認記錄詳情頁需要展示給用戶的內(nèi)容,大家可以看到這個頁面要承載很多的信息,要向下滾動一段很長的距離才能展示完,想要實現(xiàn)的效果是在頁面的頂部有一個TabBar,用戶可以通過點擊TabBar進行錨點(jumpTo到指定位置),AppBar下的整個頁面是可以自由滾動的,在滾動過程中AppBar始終固定在頂部,TabBar在第一次進入詳情頁的時候不顯示,只有在向下滑動的時候會由透明漸變?yōu)椴煌该鞑⒐潭ㄔ陧敳浚瑫r當頁面滑動到TabBar錨點位置的時候TabBar會切換到對應的下標,也就是要實現(xiàn)TabBar和ScrollView聯(lián)動的雙向控制,Tabbar的切換可以控制頁面的跳轉(zhuǎn),頁面的滑動又可以反過來控制TabBar的切換,類似與京東、淘寶的商品詳情頁效果。

SliverAppBar基本已經(jīng)達到了我們想要的效果,但在界面頂部會有塊空白區(qū)域試了很多方法怎么都去不掉,最后看了SliverAppBar這個控件的源碼發(fā)現(xiàn)是它自帶的初始高度。

這個沒法設置或消除,不可能直接去改源碼,所以后來換了一種實現(xiàn)思路,舍棄了SliverAppBar這個控件,以Stack的形式將TabBar置于ScrollView之上也能達到我們想要的效果,那么問題來了,如何實現(xiàn)TabBar的滾動漸變?很容易想到Opacity透明度控件,通過滾動監(jiān)聽來控制TabBar透明度的改變,借助Notificaion可以完美實現(xiàn)我們的需求。

Notification是Flutter中一個重要的機制,在Widget樹中,每一個節(jié)點都可以分發(fā)通知(Notification)與父(包括祖先)Widget通信,通知會沿著當前節(jié)點(context)向上傳遞,所有父節(jié)點都可以通過NotificationListener來監(jiān)聽自己關(guān)注的通知,F(xiàn)lutter中稱這種通知由子向父的傳遞為“通知冒泡”(Notification Bubbling)。

  Flutter中很多地方使用了通知,如可滾動(Scrollable) Widget中滑動時就會分發(fā)ScrollNotification,而Scrollbar正是通過監(jiān)聽ScrollNotification來確定滾動條位置的。除了ScrollNotification,F(xiàn)lutter中還有SizeChangedLayoutNotification、KeepAliveNotification 、LayoutChangedNotification等。

通過NotificationListener監(jiān)聽滾動事件和通過ScrollController有兩個主要的不同:

通過改造后,目前這個組件的原型已經(jīng)實現(xiàn)并且可以滿足我們的需求,最后就是對該demo進行完善使其能夠完美接入我們的業(yè)務,做到技術(shù)賦能業(yè)務。

在一個頁面滾動區(qū)域不是很長的情況下不建議使用,只有當頁面足夠長的情況下使用這個組件效果會比較好,因為如果一個頁面過短,點擊TabBar最后一欄進行錨點時,頁面最后一個子模塊內(nèi)容無法置頂,只會將頁面最后的內(nèi)容推到屏幕范圍內(nèi),并且由于TabBar監(jiān)聽到的是滾動的位置,會導致TabBar無法切換到對應的下標,看上去會像個bug,其實是因為底部已經(jīng)沒有內(nèi)容了。

這個組件本身并沒有太大的技術(shù)難度,但是有一些比較細節(jié)的小邏輯得處理好,并且從中衍生出來的很多瑣碎的小的知識點都可以進行拓展。 在組件開發(fā)的過程中遇到問題時不局限于控件本身的設計模式,轉(zhuǎn)變開發(fā)思維去找尋一些比較新穎的解決方案可能會有意外的收獲。同時技術(shù)不能脫離于業(yè)務,技術(shù)賦能業(yè)務才能創(chuàng)造價值。

Flutter 可滾動組件 之 SingleChildScrollView (十五)

SingleChildScrollView 源碼定義如下:

需要注意的是, 通常 SingleChildScrollView 只應在期望的內(nèi)容不會超過屏幕太多時使用 ,這是因為 SingleChildScrollView 不支持基于 Sliver 的延遲加載模型,所以如果預計視口可能包含超出屏幕尺寸太多的內(nèi)容時,那么使用 SingleChildScrollView 將會非常昂貴(性能差),此時應該使用一些支持Sliver延遲加載的可滾動組件,如 ListView 。

示例1

下面是一個將大寫字母 A-Z 沿垂直方向顯示的例子,由于垂直方向空間會超過屏幕視口高度,所以我們使用SingleChildScrollView:

示例2

示例3 - 橫向滾動

Flutter 之 可滾動組件 -- 理論知識點(十四)

Flutter 中有兩種布局模型:

基于 RenderBox 的盒模型布局。

基于 Sliver ( RenderSliver ) 按需加載列表布局。

通常可滾動組件的子組件可能會非常多、占用的總高度也會非常大;如果要一次性將子組件全部構(gòu)建出將會非常昂貴!為此,F(xiàn)lutter中提出一個Sliver(中文為“薄片”的意思)概念,Sliver 可以包含一個或多個子組件。Sliver 的主要作用是配合:加載子組件并確定每一個子組件的布局和繪制信息,如果 Sliver 可以包含多個子組件時,通常會實現(xiàn)按需加載模型。

只有當 Sliver 出現(xiàn)在視口中時才會去構(gòu)建它,這種模型也稱為“基于Sliver的列表按需加載模型”??蓾L動組件中有很多都支持基于Sliver的按需加載模型,如 ListView 、 GridView ,但是也有不支持該模型的,如 SingleChildScrollView 。

Flutter 中的可滾動主要由三個角色組成: Scrollable 、 Viewport 和 Sliver :

具體布局過程:

比如有一個 ListView,大小撐滿屏幕,假設它有 100 個列表項(都是RenderBox)且每個列表項高度相同,結(jié)構(gòu)如圖6-1所示:

圖中白色區(qū)域為設備屏幕,也是 Scrollable 、 Viewport 和 Sliver 所占用的空間,三者所占用的空間重合,父子關(guān)系為:Sliver 父組件為 Viewport,Viewport的 父組件為 Scrollable 。注意ListView 中只有一個 Sliver,在 Sliver 中實現(xiàn)了子組件的按需加載。

其中頂部和底部灰色的區(qū)域為 cacheExtent,它表示預渲染的高度,需要注意這是在可視區(qū)域之外,如果 RenderBox 進入這個區(qū)域內(nèi),即使它還未顯示在屏幕上,也是要先進行構(gòu)建的,預渲染是為了后面進入 Viewport 的時候更絲滑。cacheExtent 的默認值是 250,在構(gòu)建可滾動列表時我們可以指定這個值,這個值最終會傳給 Viewport。

用于處理滑動手勢,確定滑動偏移,滑動偏移變化時構(gòu)建 Viewport,我們看一下其關(guān)鍵的屬性:

在可滾動組件的坐標描述中,通常將滾動方向稱為主軸,非滾動方向稱為縱軸。由于可滾動組件的默認方向一般都是沿垂直方向,所以默認情況下主軸就是指垂直方向,水平方向同理。

Viewport 比較簡單,用于渲染當前視口中需要顯示 Sliver。

需要注意的是:

Sliver 主要作用是對子組件進行構(gòu)建和布局,比如 ListView 的 Sliver 需要實現(xiàn)子組件(列表項)按需加載功能,只有當列表項進入預渲染區(qū)域時才會去對它進行構(gòu)建和布局、渲染。

Sliver 對應的渲染對象類型是 RenderSliver,RenderSliver 和 RenderBox 的相同點是都繼承自 RenderObject 類,不同點是在布局的時候約束信息不同。RenderBox 在布局時父組件傳遞給它的約束信息對應的是 BoxConstraints ,只包含最大寬高的約束;而 RenderSliver 在布局時父組件(列表)傳遞給它的約束是對應的是 SliverConstraints 。關(guān)于 Sliver 的布局協(xié)議,我們將在本章最后一節(jié)中介紹。

幾乎所有的可滾動組件在構(gòu)造時都能指定 scrollDirection (滑動的主軸)、 reverse (滑動方向是否反向)、 controller 、 physics 、 cacheExtent ,這些屬性最終會透傳給對應的 Scrollable 和 Viewport,這些屬性我們可以認為是可滾動組件的通用屬性,后續(xù)再介紹具體的可滾動組件時將不再贅述。

可滾動組件都有一個 controller 屬性,通過該屬性我們可以指定一個 ScrollController 來控制可滾動組件的滾動,比如可以通過ScrollController來同步多個組件的滑動聯(lián)動。由于 ScrollController 是需要結(jié)合可滾動組件一起工作,所以本章中,我們會在介紹完 ListView 后詳細介紹 ScrollController。

Scrollbar是一個Material風格的滾動指示器(滾動條),如果要給可滾動組件添加滾動條,只需將Scrollbar作為可滾動組件的任意一個父級組件即可,如:

Scrollbar 和 CupertinoScrollbar 都是通過監(jiān)聽滾動通知來確定滾動條位置的。關(guān)于的滾動通知的詳細內(nèi)容我們將在本章最后一節(jié)中專門介紹。

CupertinoScrollbar是 iOS 風格的滾動條,如果你使用的是Scrollbar,那么在iOS平臺它會自動切換為CupertinoScrollbar


網(wǎng)站標題:flutter滾動特效,flutter 懸浮按鈕
分享網(wǎng)址:http://weahome.cn/article/phshji.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部