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