Android?Flutter實現(xiàn)有趣的頁面滾動效果

更新時間：2022年06月15日 14:18:13 作者：島上碼農(nóng)

Flutter提供了?CustomScrollView?來粘合多個滑動組件，并且可以實現(xiàn)更有趣的滑動效果，本文就來為大家詳細講講實現(xiàn)的方法，需要的可以參考一下

在Flutter 高仿一個某支付價值幾個億的頁面這一篇中，我們使用了 ListView 將幾個 GridView 組合在一起實現(xiàn)了不同可滑動組件的粘合，但是這里必須要設置禁止 GridView 的滑動，防止多個滑動組件的沖突。這種方式寫起來不太方便，事實上 Flutter 提供了 CustomScrollView 來粘合多個滑動組件，并且可以實現(xiàn)更有趣的滑動效果。

CustomScrollView 簡介

CustomScrollView的常用屬性如下：

slivers：最重要的屬性，由多個SliverXX組件組成的數(shù)組，包括如 SliverList（對應 ListView），SliverGrid（對應 GridView）等，如果普通組件無法直接使用，而需要使用SliverToBoxAdapter包裹。
reverse：是否反向滾動，如果為 true，則反方向滾動。
scrollDirection：滾動方向，可以是橫向或縱向。

改造原代碼

頁面結構需要重新調(diào)整，將原先的 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()即可，參數(shù)基本相同，只是我們可以將之前禁止滑動的代碼刪除了。

//在?SliverGrid?中無需下面兩行代碼禁止滑動
shrinkWrap:?true,
physics:?NeverScrollableScrollPhysics(),

讓導航欄更有趣

在 Flutter 中提供了一個 SliverAppBar專門用于 CustomScrollView，該導航欄基本屬性和 AppBar 類似，但有些其他的屬性：

floating：浮動，即便是滾動視圖不在頂部，SliverAppBar也會跟隨滾動出現(xiàn)。
snap：手指放開時會根據(jù)當前狀態(tài)決定是否展開或收起。如果為 false，則導航欄會停留在上次滑動位置。
pinned：滾動到頂部后，導航欄是否可見，默認是 false。若為 false，則滾動出頂部后導航欄將消失。
expandedHeight：導航欄展開后的高度。
flexibleSpace：擴展彈性空間，即導航欄滑動時的收起或展開組件，可以有背景圖片和導航欄文字，當滑動到頂部后只顯示文字導航欄，當下滑后，會逐步顯示背景內(nèi)容，從而實現(xiàn)動態(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()),
????????],
??????),
????);
??}