Android?Flutter實(shí)現(xiàn)有趣的頁面滾動效果
在Flutter 高仿一個(gè)某支付價(jià)值幾個(gè)億的頁面這一篇中，我們使用了 ListView 將幾個(gè) GridView 組合在一起實(shí)現(xiàn)了不同可滑動組件的粘合，但是這里必須要設(shè)置禁止 GridView 的滑動，防止多個(gè)滑動組件的沖突。這種方式寫起來不太方便，事實(shí)上 Flutter 提供了 CustomScrollView 來粘合多個(gè)滑動組件，并且可以實(shí)現(xiàn)更有趣的滑動效果。
CustomScrollView 簡介
CustomScrollView的常用屬性如下：
slivers：最重要的屬性，由多個(gè)SliverXX組件組成的數(shù)組，包括如SliverList（對應(yīng)ListView），SliverGrid（對應(yīng)GridView）等，如果普通組件無法直接使用，而需要使用SliverToBoxAdapter包裹。- reverse：是否反向滾動，如果為 true，則反方向滾動。
- scrollDirection：滾動方向，可以是橫向或縱向。
改造原代碼
頁面結(jié)構(gòu)需要重新調(diào)整，將原先的 GridView 改成 SliverGrid，然后頂部區(qū)域需要使用 SliverToBoxAdapter進(jìn)行包裹。每個(gè)區(qū)域的標(biāo)題欄也需要單獨(dú)使用SliverToBoxAdapter 包裹起來。SliverToBoxAdapter使用很簡單，只需要將原有的組件設(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ù)基本相同，只是我們可以將之前禁止滑動的代碼刪除了。
//在?SliverGrid?中無需下面兩行代碼禁止滑動 shrinkWrap:?true, physics:?NeverScrollableScrollPhysics(),
讓導(dǎo)航欄更有趣
在 Flutter 中提供了一個(gè) SliverAppBar專門用于 CustomScrollView，該導(dǎo)航欄基本屬性和 AppBar 類似，但有些其他的屬性：
floating：浮動，即便是滾動視圖不在頂部，SliverAppBar也會跟隨滾動出現(xiàn)。snap：手指放開時(shí)會根據(jù)當(dāng)前狀態(tài)決定是否展開或收起。如果為false，則導(dǎo)航欄會停留在上次滑動位置。pinned：滾動到頂部后，導(dǎo)航欄是否可見，默認(rèn)是false。若為false，則滾動出頂部后導(dǎo)航欄將消失。expandedHeight：導(dǎo)航欄展開后的高度。flexibleSpace：擴(kuò)展彈性空間，即導(dǎo)航欄滑動時(shí)的收起或展開組件，可以有背景圖片和導(dǎo)航欄文字，當(dāng)滑動到頂部后只顯示文字導(dǎo)航欄，當(dāng)下滑后，會逐步顯示背景內(nèi)容，從而實(shí)現(xiàn)動態(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 組件依次排列就可以完成拼接后一起滾動，相比使用 ListView 來說會更簡便，且效果更好。
@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懸停頭部組件用于顯示懸停的表頭。具體可以參考對應(yīng)文檔，這在需要展示頂部的功能切換欄或者表格表頭的時(shí)候很有用。
總結(jié)
本篇介紹了 CustomScrollView 的基本用法以及 SliverAppBar 的使用，通過 SliverAppBar 可以讓導(dǎo)航欄的滑動更有趣。在實(shí)際開發(fā)過程中，推薦在有多個(gè)滑動組件組合的時(shí)候優(yōu)先使用 CustomScrollView。
以上就是Android Flutter實(shí)現(xiàn)有趣的頁面滾動效果的詳細(xì)內(nèi)容，更多關(guān)于Android Flutter頁面滾動效果的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Android使用animator實(shí)現(xiàn)fragment的3D翻轉(zhuǎn)效果
這篇文章主要為大家詳細(xì)介紹了Android使用animator實(shí)現(xiàn)fragment的3D翻轉(zhuǎn)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
android通過servlet服務(wù)器保存文件到手機(jī)
這篇文章主要為大家詳細(xì)介紹了android通過servlet服務(wù)器保存文件到手機(jī)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
Android利用Intent實(shí)現(xiàn)記事本功能（NotePad）
這篇文章主要為大家詳細(xì)介紹了Android利用Intent實(shí)現(xiàn)簡單記事本功能（NotePad）的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
老項(xiàng)目遷移AndroidStudio3.0遇到的坑
給大家分享了老的項(xiàng)目以及程序遷移到了AndroidStudio3.0遇到的坑和問題解決辦法，希望給你做個(gè)參考。2017-11-11
實(shí)例講解Android中的AIDL內(nèi)部進(jìn)程通信接口使用
這篇文章主要通過實(shí)例介紹了Android中的AIDL內(nèi)部進(jìn)程通信接口使用,文中通過一個(gè)音樂播放的服務(wù)編寫例子來講解AIDL的傳遞對象及一般使用步驟,需要的朋友可以參考下2016-04-04
Android中的Dalvik和ART詳解及區(qū)別分析
小編通過這篇文章給大家整理了什么是Dalvik和ART，并進(jìn)行了區(qū)別的分析，下面一起來看看。2016-07-07
實(shí)例解析Android中使用Pull解析器解析XML的方法
這篇文章主要介紹了Android中使用Pull解析器解析XML的方法,與DOM和SAX解析方式相比人們更推崇Pull,需要的朋友可以參考下2016-04-04
這篇文章主要介紹了Android自定義控件下拉刷新實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10
