SliverAppBar 控件,一個(gè) MD 的 AppBar 。屬性和 AppBar 類似,但做的效果比 AppBar 更加強(qiáng)大。相同的屬性具體可以看 Flutter 之 Scaffold 控件 , 里面有 AppBar 控件的介紹。那么還有些沒有的屬性:
創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)與策劃設(shè)計(jì),開州網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:開州等地區(qū)。開州做網(wǎng)站價(jià)格咨詢:18982081108
結(jié)合 elevation 使用,當(dāng)elevation 不為 0 的時(shí)候,是否顯示陰影
AppBar 展開時(shí)候的高度
true 的時(shí)候下滑AppBar優(yōu)先滑動展示,展示完成后才給滑動控件滑動
snap 為 true, 則 floating 也要為 true 。true 的時(shí)候根據(jù)手指松開的位置展開或者收縮AppBar
appBar 收縮到最小高度的時(shí)候 appBar 是否可見
SliverAppBar 往往做為 CustomScrollView 的第一個(gè)子元素,根據(jù)滾動控件的偏移量或者浮動的位置來改變 SliverAppBar 的高度。所以具體用法如下
另外在上面設(shè)計(jì)到 FlexibleSpaceBar 控件,F(xiàn)lexibleSpaceBar 有個(gè) collapseMode 屬性
為 Sliver 系列控件添加一個(gè) padding 。如給上面 SliverAppBar 添加一個(gè) Padding 。
多行多列的列表控件,相當(dāng)于 Android 的 GridView,有兩個(gè)屬性
SliverChildDelegate,這里有兩種方式創(chuàng)建
SliverGridDelegate,也是有兩種方式創(chuàng)建
結(jié)合上面展示效果
和上面 delegate 屬性一樣,需要創(chuàng)建一個(gè) SliverChildDelegate 。
比 SliverList 多一個(gè) itemExtent 屬性,設(shè)置 item 的高度 。item 里面的子控件無法再改動高度。
上面 SliverAppBar 就是結(jié)合 SliverPersistentHeader 實(shí)現(xiàn)的效果,SliverPersistentHeader 需要一個(gè) SliverPersistentHeaderDelegate 。 實(shí)現(xiàn) SliverPersistentHeaderDelegate 有 4 個(gè)方法需要重寫
至于效果,具體效果具體分析。
有一個(gè) Widget 屬性,主要作用是在 CustomScrollView 里面添加多種不同布局的樣式。
占滿一屏或者比一屏更多的布局,
滑動剩余部分展示的布局
1.webview_flutter
2.flutter_inappwebview
3.flutter_webview_plugin
筆者最近發(fā)現(xiàn)webview_flutter在Android端嵌套帶有較長的Webview頁面時(shí)偶?xì)W會存在卡頓問題表現(xiàn)為加速向下滑動到頁面底部,然后從底部慢慢像上滑就不起作用了,體驗(yàn)很不好,經(jīng)過一天的排查和實(shí)驗(yàn)發(fā)現(xiàn)是webview_flutter插件自己的問題,用原生嵌套WebView并沒有問題,后來改成flutter_webview_plugin問題可以解決,但是flutter_webview_plugin插件并不是基于flutter渲染的并不能在嵌套webview的頁面自定義flutter樣式層,后來發(fā)現(xiàn)使用flutter_inappwebview插件能夠完美解決問題。推薦你們用flutter_inappwebview。
ScrollView 是一個(gè)帶有滾動的視圖組件。
ScrollView 由三部分組成:
ScrollView 有以下常用屬性:
注:ScrollView 是一個(gè)抽象類,通常使用 CustomScrollView。
SliverAppBar 可以實(shí)現(xiàn)背景,標(biāo)題,頂部導(dǎo)航欄聯(lián)動,漸隱漸出動畫。
基本和AppBar一樣,只是他只能在CustomScrollView中使用,應(yīng)該很常見,滑動的時(shí)候固定appbar,就需要用到他.
大部分和appbar一樣,主要說下重要的幾個(gè):
是否將導(dǎo)航欄部分固定在appbar的位置.這個(gè)需求在實(shí)際中很常用. 看看效果圖.
當(dāng) pinned = false:
可以看到appbar并沒有固定在最上面,而是根據(jù)內(nèi)容劃出了界面.
當(dāng) pinned = true :
這個(gè)應(yīng)該是需求中經(jīng)常用到的效果了.
當(dāng)floating = false :
當(dāng)floating = true:
仔細(xì)看 ,區(qū)別是在列表整體向下滑動時(shí),appbar開始顯示的位置不同.
當(dāng)為false時(shí) ,向下滑動時(shí),會先降列表內(nèi)容滑動頂部,然后appbar會跟著列表滑動顯示出來.如上圖
當(dāng)為true時(shí), 向下滑動時(shí),appbar會先跟著列表滑動顯示出來. 然后繼續(xù)列表的滑動. 如上圖
不能單獨(dú)使用要配合 ****floating 和 ****pinned
具體效果看官網(wǎng)地址
是否展開,默認(rèn)false,直接看值為true的效果圖,就明白了.
可以再里面添加擴(kuò)展的內(nèi)容:
通過測試發(fā)現(xiàn) **后面不是 FlexibleSpaceBar 的話, stretch = true 無效. **
和Padding一樣.子控件是 sliver 類型...
上圖中在padding中添加了一個(gè)背景色為青色的容器widget
里面可以設(shè)置不是 sliver 類型的widget。如上圖中的 padding中添加的 container
就兩個(gè)協(xié)議,一個(gè)是布局協(xié)議一個(gè)展示協(xié)議.基本和GridView一樣.也有count和extext... 不設(shè)置個(gè)數(shù)默認(rèn)無數(shù)個(gè)
SliverChildListDelegate 這種方式前提是知道cell個(gè)數(shù),比較少,好搭建
SliverChildBuilderDelegate 這種方式,可以根據(jù)數(shù)組去創(chuàng)建,不知道cell個(gè)數(shù)
和listview差不多.也是協(xié)議 不設(shè)置個(gè)數(shù)默認(rèn)無數(shù)個(gè)
SingleChildScrollView 源碼定義如下:
需要注意的是, 通常 SingleChildScrollView 只應(yīng)在期望的內(nèi)容不會超過屏幕太多時(shí)使用 ,這是因?yàn)?SingleChildScrollView 不支持基于 Sliver 的延遲加載模型,所以如果預(yù)計(jì)視口可能包含超出屏幕尺寸太多的內(nèi)容時(shí),那么使用 SingleChildScrollView 將會非常昂貴(性能差),此時(shí)應(yīng)該使用一些支持Sliver延遲加載的可滾動組件,如 ListView 。
示例1
下面是一個(gè)將大寫字母 A-Z 沿垂直方向顯示的例子,由于垂直方向空間會超過屏幕視口高度,所以我們使用SingleChildScrollView:
示例2
示例3 - 橫向滾動
onInteractionEnd 交互結(jié)束
onInteractionStart 交互開始
onInteractionUpdate 滑動時(shí)候一直會回調(diào)
focalPoint 是相對于屏幕左上角的偏移量。
localFocalPoint是相對于父容器區(qū)域左上角的偏移量。
scale縮放量。
horizontalScale水平縮放量。
verticalScale豎直縮放量。
rotation旋轉(zhuǎn)量。------ 這里說明能監(jiān)聽到旋轉(zhuǎn)量
還可以通過transformationController進(jìn)行變換控制,有興趣的可以自己研究。
參考文章