題記
—— 執(zhí)劍天涯，從你的點滴積累開始，所及之處，必精益求精。

---

Flutter是谷歌推出的最新的移動開發(fā)框架。

本實例運行效果如下 ：

//啟動函數(shù)void main() { runApp(RootApp());}//根目錄class RootApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData(primaryColor: Colors.grey[200]), //默認啟動的頁面 home: HomePage(), ); }}

初始化創(chuàng)建一個?TabController 用來控制?TabBar 與 TabBarView的聯(lián)動效果：

class?HomePage?extends?StatefulWidget?{ @override StatecreateState() { return _ScrollHomePageState(); }}class _ScrollHomePageState extends State with SingleTickerProviderStateMixin { //在這里標簽頁面使用的是TabView所以需要創(chuàng)建一個控制器 TabController tabController; //頁面初始化方法 @override void initState() { super.initState(); //初始化 tabController = new TabController(length: 3, vsync: this); } //頁面銷毀回調(diào)生命周期 @override void dispose() { tabController.dispose(); } ...}

對于頁面的主體 使用了 Scaffold ：

@overrideWidget build(BuildContext context) { //構(gòu)建頁面的主體 return Scaffold( //下拉刷新 body: RefreshIndicator( //可滾動組件在滾動時會發(fā)送ScrollNotification類型的通知 notificationPredicate: (ScrollNotification notifation) { //該屬性包含當前ViewPort及滾動位置等信息 ScrollMetrics scrollMetrics = notifation.metrics; if (scrollMetrics.minScrollExtent == 0) { return true; } else { return false; } }, //下拉刷新回調(diào)方法 onRefresh: () async { //模擬網(wǎng)絡(luò)刷新 等待2秒 await Future.delayed(Duration(milliseconds: 2000)); //返回值以結(jié)束刷新 return Future.value(true); }, child: buildNestedScrollView(), ), );}

RefreshIndicator 是一個下拉刷新組件，用來觸發(fā)下拉刷新效果，直接嵌套NestedScrollView滑動布局來使用

//NestedScrollView 的基本使用Widget buildNestedScrollView() { //滑動視圖 return NestedScrollView( //配置可折疊的頭布局 headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { return [buildSliverAppBar()]; }, //頁面的主體內(nèi)容 body: buidChildWidget(), );}

NestedScrollView 中包含兩部分，一部分是折疊的頭部，使用SliverAppBar來實現(xiàn)，另一部分是滑動切換的頁面主體 使用 TabBarView 來實現(xiàn)

//通常在用到 PageView + BottomNavigationBar 或者 TabBarView + TabBar 的時候 //大家會發(fā)現(xiàn)當切換到另一頁面的時候, 前一個頁面就會被銷毀, 再返回前一頁時, 頁面會被重建, //隨之數(shù)據(jù)會重新加載, 控件會重新渲染 帶來了極不好的用戶體驗. //由于TabBarView內(nèi)部也是用的是PageView, 因此兩者的解決方式相同 //頁面的主體內(nèi)容 Widget buidChildWidget() { return TabBarView( controller: tabController, children: <Widget>[ ItemPage1(1), ItemPage1(2), ItemPage1(3), ], ); }

SliverAppBar 的實現(xiàn)如下：

//flexibleSpace可折疊的內(nèi)容區(qū)域buildSliverAppBar() { return SliverAppBar( title: buildHeader(), //標題居中 centerTitle: true, //當此值為true時 SliverAppBar 會固定在頁面頂部 //當此值為fase時 SliverAppBar 會隨著滑動向上滑動 pinned: true, //當值為true時 SliverAppBar設(shè)置的title會隨著上滑動隱藏 //然后配置的bottom會顯示在原AppBar的位置 //當值為false時 SliverAppBar設(shè)置的title會不會隱藏 //然后配置的bottom會顯示在原AppBar設(shè)置的title下面 floating: false, //當snap配置為true時，向下滑動頁面，SliverAppBar(以及其中配置的flexibleSpace內(nèi)容)會立即顯示出來， //反之當snap配置為false時，向下滑動時，只有當ListView的數(shù)據(jù)滑動到頂部時，SliverAppBar才會下拉顯示出來。 snap: false, elevation: 0.0, //展開的高度 expandedHeight: 380, //AppBar下的內(nèi)容區(qū)域 flexibleSpace: FlexibleSpaceBar( //背景 //配置的是一個widget也就是說在這里可以使用任意的 //Widget組合 在這里直接使用的是一個圖片 background: buildFlexibleSpaceWidget(), ), bottom: buildFlexibleTooBarWidget(), );}

SliverAppBar中有三部分，第一部分是標題部分，通過title屬性配置，代碼如下：

//構(gòu)建SliverAppBar的標題titlebuildHeader() { //透明組件 return Container( width: double.infinity, padding: EdgeInsets.only(left: 10), height: 38, decoration: BoxDecoration( color: Colors.white, border: Border.all(color: Colors.white), borderRadius: BorderRadius.circular(30), ), child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Icon( Icons.search_rounded, size: 18, ), SizedBox( width: 4, ), Text( "搜索", style: TextStyle( fontSize: 14, ), ), ], ), );}

第二部分就是用來折疊部分的輪播圖，通過 flexibleSpace 屬性配置的FlexibleSpaceBar中配置，代碼如下：

buildFlexibleSpaceWidget() { return Column( children: [ Container( height: 240, child: BannerHomepage(isTitle: false,), ), Container( child: Row( children: [ Expanded( child: Container( height: 120, color: Colors.blueGrey, child: Image.asset("images/banner5.jpeg"), ), ), Expanded( child: Container( color: Colors.brown, height: 120, child: Image.asset("images/banner6.jpeg"), ), ), ], ), ) ], ); }

BannerHomepage 的實現(xiàn)在這里?Flutter Pageview 實現(xiàn)的輪播圖

第三部分就是通過?bottom 配置的?TabBar 標簽欄，在這里結(jié)合?PreferredSize?來使用，代碼如下：

//[SliverAppBar]的bottom屬性配制 Widget buildFlexibleTooBarWidget() { //[PreferredSize]用于配置在AppBar或者是SliverAppBar //的bottom中 實現(xiàn) PreferredSizeWidget return PreferredSize( //定義大小 preferredSize: Size(MediaQuery.of(context).size.width, 44), //配置任意的子Widget child: Container( alignment: Alignment.center, child: Container( color: Colors.grey[200], //隨著向上滑動，TabBar的寬度逐漸增大 //父布局Container約束為 center對齊 //所以程現(xiàn)出來的是中間x軸放大的效果 width: MediaQuery.of(context).size.width, child: TabBar( controller: tabController, tabs: [ new Tab( text: "標簽一", ), new Tab( text: "標簽二", ), new Tab( text: "標簽三", ), ], ), ), ), ); }

點擊查看原文來獲取源碼。

總結(jié)

以上是生活随笔為你收集整理的listview刷新_Flutter NestedScrollView 滑动折叠头部下拉刷新效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。