Android?Flutter實(shí)現(xiàn)有趣的頁面滾動(dòng)效果
在Flutter 高仿一個(gè)某支付價(jià)值幾個(gè)億的頁面這一篇中，我們使用了 ListView 將幾個(gè) GridView 組合在一起實(shí)現(xiàn)了不同可滑動(dòng)組件的粘合，但是這里必須要設(shè)置禁止 GridView 的滑動(dòng)，防止多個(gè)滑動(dòng)組件的沖突。這種方式寫起來不太方便，事實(shí)上 Flutter 提供了 CustomScrollView 來粘合多個(gè)滑動(dòng)組件，并且可以實(shí)現(xiàn)更有趣的滑動(dòng)效果。
CustomScrollView 簡(jiǎn)介
CustomScrollView的常用屬性如下：
slivers：最重要的屬性，由多個(gè)SliverXX組件組成的數(shù)組，包括如SliverList（對(duì)應(yīng)ListView），SliverGrid（對(duì)應(yīng)GridView）等，如果普通組件無法直接使用，而需要使用SliverToBoxAdapter包裹。- reverse：是否反向滾動(dòng)，如果為 true，則反方向滾動(dòng)。
- scrollDirection：滾動(dòng)方向，可以是橫向或縱向。
改造原代碼
頁面結(jié)構(gòu)需要重新調(diào)整，將原先的 GridView 改成 SliverGrid，然后頂部區(qū)域需要使用 SliverToBoxAdapter進(jìn)行包裹。每個(gè)區(qū)域的標(biāo)題欄也需要單獨(dú)使用SliverToBoxAdapter 包裹起來。SliverToBoxAdapter使用很簡(jiǎn)單，只需要將原有的組件設(shè)置為其 child 屬性即可。
Widget?_headerGridButtons()?{
??double?height?=?144;
??List<Map<String,?String>>?buttons?=?GridMockData.headerGrids();
??return?SliverToBoxAdapter(
????child:?Container(
??????height:?height,
??????margin:?EdgeInsets.fromLTRB(MARGIN,?MARGIN,?MARGIN,?MARGIN?/?2),
??????decoration:?BoxDecoration(
????????borderRadius:?BorderRadius.circular(4.0),
????????gradient:?LinearGradient(
????????????begin:?Alignment.topCenter,
????????????end:?Alignment.bottomCenter,
????????????colors:?[
??????????????Color(0xFF56AF6D),
??????????????Color(0xFF56AA6D),
????????????]),
??????),
??????child:?Center(
????????child:?Row(
????????????mainAxisAlignment:?MainAxisAlignment.spaceEvenly,
????????????children:?buttons
????????????????.map((item)?=>?_getMenus(item['icon'],?item['name'],
????????????????????color:?Colors.white))
????????????????.toList()),
??????),
????),
??);
}
Widget?_getMenuTitle(String?title)?{
??return?SliverToBoxAdapter(
????child:?Container(
??????margin:?EdgeInsets.fromLTRB(MARGIN,?MARGIN,?MARGIN,?MARGIN?/?2),
??????padding:?EdgeInsets.all(MARGIN),
??????decoration:?BoxDecoration(
????????borderRadius:?BorderRadius.circular(4.0),
????????color:?Colors.white,
??????),
??????child:?Text(
????????title,
????????style:?TextStyle(color:?Colors.grey[700]),
??????),
????),
??);
}
GridView 我們之前使用的是 Grid.count() 方法，這里只需要更換為 SliverGrid.count()即可，參數(shù)基本相同，只是我們可以將之前禁止滑動(dòng)的代碼刪除了。
//在?SliverGrid?中無需下面兩行代碼禁止滑動(dòng) shrinkWrap:?true, physics:?NeverScrollableScrollPhysics(),
讓導(dǎo)航欄更有趣
在 Flutter 中提供了一個(gè) SliverAppBar專門用于 CustomScrollView，該導(dǎo)航欄基本屬性和 AppBar 類似，但有些其他的屬性：
floating：浮動(dòng)，即便是滾動(dòng)視圖不在頂部，SliverAppBar也會(huì)跟隨滾動(dòng)出現(xiàn)。snap：手指放開時(shí)會(huì)根據(jù)當(dāng)前狀態(tài)決定是否展開或收起。如果為false，則導(dǎo)航欄會(huì)停留在上次滑動(dòng)位置。pinned：滾動(dòng)到頂部后，導(dǎo)航欄是否可見，默認(rèn)是false。若為false，則滾動(dòng)出頂部后導(dǎo)航欄將消失。expandedHeight：導(dǎo)航欄展開后的高度。flexibleSpace：擴(kuò)展彈性空間，即導(dǎo)航欄滑動(dòng)時(shí)的收起或展開組件，可以有背景圖片和導(dǎo)航欄文字，當(dāng)滑動(dòng)到頂部后只顯示文字導(dǎo)航欄，當(dāng)下滑后，會(huì)逐步顯示背景內(nèi)容，從而實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)航欄的效果。
SliverAppBar?_getAppBar(String?title)?{
??return?SliverAppBar(
????pinned:?true,
????expandedHeight:?200,
????brightness:?Brightness.dark,
????flexibleSpace:?FlexibleSpaceBar(
??????title:?Text(title),
??????background:?Image.network(
????????'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=688497718,308119011&fm=26&gp=0.jpg',
????????fit:?BoxFit.cover,
??????),
????),
??);
}
改造后的代碼
改造后需要使用 Container 包裹，以設(shè)置背景顏色，多個(gè) Sliver 組件依次排列就可以完成拼接后一起滾動(dòng)，相比使用 ListView 來說會(huì)更簡(jiǎn)便，且效果更好。
@override
??Widget?build(BuildContext?context)?{
????return?Container(
??????color:?Colors.white,
??????child:?CustomScrollView(
????????slivers:?[
??????????_getAppBar('個(gè)人中心'),
??????????_headerGridButtons(),
??????????_getMenuTitle('金融理財(cái)'),
??????????_gridButtons(GridMockData.financeGrids()),
??????????_getMenuTitle('生活服務(wù)'),
??????????_gridButtons(GridMockData.serviceGrids()),
??????????_getMenuTitle('購物消費(fèi)'),
??????????_gridButtons(GridMockData.thirdpartyGrids()),
????????],
??????),
????);
??}
其他效果
除了上述的效果外，F(xiàn)lutter 還提供了SliverPersistentHeader懸停頭部組件用于顯示懸停的表頭。具體可以參考對(duì)應(yīng)文檔，這在需要展示頂部的功能切換欄或者表格表頭的時(shí)候很有用。
總結(jié)
本篇介紹了 CustomScrollView 的基本用法以及 SliverAppBar 的使用，通過 SliverAppBar 可以讓導(dǎo)航欄的滑動(dòng)更有趣。在實(shí)際開發(fā)過程中，推薦在有多個(gè)滑動(dòng)組件組合的時(shí)候優(yōu)先使用 CustomScrollView。
以上就是Android Flutter實(shí)現(xiàn)有趣的頁面滾動(dòng)效果的詳細(xì)內(nèi)容，更多關(guān)于Android Flutter頁面滾動(dòng)效果的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Android之內(nèi)置和外置sdcard路徑顯示并且寫入數(shù)據(jù)的方法
今天小編就為大家分享一篇Android之內(nèi)置和外置sdcard路徑顯示并且寫入數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Android實(shí)現(xiàn)文件按時(shí)間先后順序排列顯示的示例代碼
在很多Android應(yīng)用中,需要管理和展示本地文件,對(duì)文件按最后修改時(shí)間排序展示,能讓用戶直觀地了解文件的創(chuàng)建或修改順序,從而更方便地查找最新或最舊的文件,本文將介紹如何在Android平臺(tái)上獲取指定目錄下的文件列表,并按照時(shí)間先后排序,需要的朋友可以參考下2025-04-04
這篇文章主要為大家詳細(xì)介紹了Android仿小米時(shí)鐘效果的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
Android中在WebView里實(shí)現(xiàn)Javascript調(diào)用Java類的方法
這篇文章主要介紹了Android中在WebView里實(shí)現(xiàn)Javascript調(diào)用Java類的方法,本文直接給出示例,需要的朋友可以參考下2015-03-03
Android實(shí)現(xiàn)基本功能的新聞應(yīng)用
這篇文章主要介紹了一個(gè)簡(jiǎn)易功能的Android新聞應(yīng)用實(shí)現(xiàn)流程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-12-12
Android判斷手機(jī)是否聯(lián)網(wǎng)及自動(dòng)跳轉(zhuǎn)功能(收藏版)
這篇文章主要介紹了Android判斷手機(jī)是否聯(lián)網(wǎng)及自動(dòng)跳轉(zhuǎn)功能(收藏版),在一些手機(jī)端連接wifi我們經(jīng)常會(huì)遇到這樣的功能，今天小編通過實(shí)例截圖給大家介紹下，需要的朋友可以參考下2019-11-11
Android利用Intent實(shí)現(xiàn)記事本功能（NotePad）
這篇文章主要為大家詳細(xì)介紹了Android利用Intent實(shí)現(xiàn)簡(jiǎn)單記事本功能（NotePad）的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
Android手機(jī)聯(lián)系人快速索引(手機(jī)通訊錄)
最近需要實(shí)現(xiàn)一個(gè)手機(jī)通訊錄的快速索引功能。根據(jù)姓名首字母快速索引功能，下面通過本篇文章給大家介紹Android手機(jī)聯(lián)系人快速索引(手機(jī)通訊錄)的相關(guān)代碼，需要的朋友參考下2015-12-12
為提高代碼的可讀性以及后期的可維護(hù)性,為我們的代碼加上規(guī)范化的注釋是很有必要,不僅有利于提高自己的專業(yè)素養(yǎng),也能方便他人2013-12-12
Chronometer是一個(gè)簡(jiǎn)單的計(jì)時(shí)器，這篇文章主要介紹了android Chronometer控件簡(jiǎn)單使用，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-09-09