ScrollView 是一個帶有滾動的視圖組件。
公司主營業(yè)務(wù):成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳,提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化,感謝他們對我們的高要求,感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn),讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出聞喜免費做網(wǎng)站回饋大家。
ScrollView 由三部分組成:
ScrollView 有以下常用屬性:
注:ScrollView 是一個抽象類,通常使用 CustomScrollView。
SliverAppBar 可以實現(xiàn)背景,標題,頂部導航欄聯(lián)動,漸隱漸出動畫。
ListView的基礎(chǔ)創(chuàng)建使用有三種方式:
通過默認構(gòu)造函數(shù)來創(chuàng)建列表,應(yī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ā) 的干貨,追求 短、平、快 ,但 卻不缺深度 。
SingleChildScrollView 源碼定義如下:
需要注意的是, 通常 SingleChildScrollView 只應(yīng)在期望的內(nèi)容不會超過屏幕太多時使用 ,這是因為 SingleChildScrollView 不支持基于 Sliver 的延遲加載模型,所以如果預(yù)計視口可能包含超出屏幕尺寸太多的內(nèi)容時,那么使用 SingleChildScrollView 將會非常昂貴(性能差),此時應(yīng)該使用一些支持Sliver延遲加載的可滾動組件,如 ListView 。
示例1
下面是一個將大寫字母 A-Z 沿垂直方向顯示的例子,由于垂直方向空間會超過屏幕視口高度,所以我們使用SingleChildScrollView:
示例2
示例3 - 橫向滾動
對于滾動的視圖,我們經(jīng)常需要監(jiān)聽它的一些滾動事件,在監(jiān)聽到的時候去做對應(yīng)的一些事情。
比如視圖滾動到底部時,我們可能希望做上拉加載更多;
比如滾動到一定位置時顯示一個回到頂部的按鈕,點擊回到頂部的按鈕,回到頂部;
比如監(jiān)聽滾動什么時候開始,什么時候結(jié)束;
在Flutter中監(jiān)聽滾動相關(guān)的內(nèi)容由兩部分組成:ScrollController和ScrollNotification。
ScrollController
在Flutter中,Widget并不是最終渲染到屏幕上的元素(真正渲染的是RenderObject),因此通常這種監(jiān)聽事件以及相關(guān)的信息并不能直接從Widget中獲取,而是必須通過對應(yīng)的Widget的Controller來實現(xiàn)。
ListView、GridView的組件控制器是ScrollController,我們可以通過它來獲取視圖的滾動信息,并且可以調(diào)用里面的方法來更新視圖的滾動位置。
另外,通常情況下,我們會根據(jù)滾動的位置來改變一些Widget的狀態(tài)信息,所以ScrollController通常會和StatefulWidget一起來使用,并且會在其中控制它的初始化、監(jiān)聽、銷毀等事件。
我們來做一個案例,當滾動到1000位置的時候,顯示一個回到頂部的按鈕:
jumpTo(double offset)、animateTo(double offset,...):這兩個方法用于跳轉(zhuǎn)到指定的位置,它們不同之處在于,后者在跳轉(zhuǎn)時會執(zhí)行一個動畫,而前者不會。
ScrollController間接繼承自Listenable,我們可以根據(jù)ScrollController來監(jiān)聽滾動事件。
空間超出提示
注釋 :Flutter Incorrect use of ParentDataWidget
問題原因:Expanded、Flexible等組件,在“Container、Padding、Stack”組件中導致的。
解決方案:保持: Expanded、Flexible 只在 Row、Column 等組件內(nèi),不在其他組件內(nèi)使用。
控件Row有一個水平的布局方向,但是內(nèi)容已經(jīng)超出了可顯示的范圍。
建議我們使用有彈性的控件比如Expanded代替,或者使用可裁剪的控件ClipRect代替,還可以使用具體滾動屬性的控件比如ListView代替
1、類似圖片加載失敗,然后溢出擠壓空間,可以用Container包裹一下
直接使用,如果圖片地址失效,就會溢出
直接使用,圖片鏈接失效引起
2、類似這種超出
A RenderFlex overflowed by 48 pixels on the right.
3、類似這種Column滾動超出!
實現(xiàn)頁面滑動需要用到SingleChildScrollView組件,SingleChildScrollView和Android中ScrollView類似
問題原因:Expanded、Flexible等組件,在“Container、Padding、Stack”組件中導致的。
解決方案:保持:Expanded、Flexible只在Row、Column等組件內(nèi),不在其他組件內(nèi)使用。
SliverAppBar 控件,一個 MD 的 AppBar 。屬性和 AppBar 類似,但做的效果比 AppBar 更加強大。相同的屬性具體可以看 Flutter 之 Scaffold 控件 , 里面有 AppBar 控件的介紹。那么還有些沒有的屬性:
結(jié)合 elevation 使用,當elevation 不為 0 的時候,是否顯示陰影
AppBar 展開時候的高度
true 的時候下滑AppBar優(yōu)先滑動展示,展示完成后才給滑動控件滑動
snap 為 true, 則 floating 也要為 true 。true 的時候根據(jù)手指松開的位置展開或者收縮AppBar
appBar 收縮到最小高度的時候 appBar 是否可見
SliverAppBar 往往做為 CustomScrollView 的第一個子元素,根據(jù)滾動控件的偏移量或者浮動的位置來改變 SliverAppBar 的高度。所以具體用法如下
另外在上面設(shè)計到 FlexibleSpaceBar 控件,F(xiàn)lexibleSpaceBar 有個 collapseMode 屬性
為 Sliver 系列控件添加一個 padding 。如給上面 SliverAppBar 添加一個 Padding 。
多行多列的列表控件,相當于 Android 的 GridView,有兩個屬性
SliverChildDelegate,這里有兩種方式創(chuàng)建
SliverGridDelegate,也是有兩種方式創(chuàng)建
結(jié)合上面展示效果
和上面 delegate 屬性一樣,需要創(chuàng)建一個 SliverChildDelegate 。
比 SliverList 多一個 itemExtent 屬性,設(shè)置 item 的高度 。item 里面的子控件無法再改動高度。
上面 SliverAppBar 就是結(jié)合 SliverPersistentHeader 實現(xiàn)的效果,SliverPersistentHeader 需要一個 SliverPersistentHeaderDelegate 。 實現(xiàn) SliverPersistentHeaderDelegate 有 4 個方法需要重寫
至于效果,具體效果具體分析。
有一個 Widget 屬性,主要作用是在 CustomScrollView 里面添加多種不同布局的樣式。
占滿一屏或者比一屏更多的布局,
滑動剩余部分展示的布局