昨天Flutter 1.17版本重磅釋出，新的版本主要是最佳化效能、修復bug，有人覺得此版本毫無亮點，但也從另一方面體現了Flutter目前針對移動端已經較為完善，想了解具體內容，文末有連結，如果你想升級到最新版本，建議慎重，有些人升級後專案無法執行。
今天介紹的元件是NestedScrollView，大部分的App首頁都會用到這個元件。
可以在其內部巢狀其他滾動檢視的滾動檢視，其滾動位置是固有連結的。
在普通的 ScrollView 中， 如果有一個Sliver元件容納了一個 TabBarView ，它沿相反的方向滾動（例如，允許使用者在標籤所代表的頁面之間水平滑動，而列表則垂直滾動），則該 TabBarView 內部的任何列表都不會相互作用 與外部 ScrollView 。 例如，瀏覽內部列表以滾動到頂部不會導致外部 ScrollView 中的 SliverAppBar 摺疊以展開。
滾動隱藏AppBar
比如實現如下場景，當列表滾動時，隱藏 AppBar ，用法如下：
NestedScrollView( headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { return
[SliverAppBar( title: Text('指令碼之家'), )]; }, body: ListView.builder(itemBuilder: (BuildContext context,int index){ return Container( height: 80, color: Colors.primaries[index % Colors.primaries.length], alignment: Alignment.center, child: Text( '$index', style: TextStyle(color: Colors.white, fontSize: 20), ), ); },itemCount: 20,), )
效果如下：
SliverAppBar展開摺疊
用法如下：
NestedScrollView( headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { return[SliverAppBar( expandedHeight: 230.0, pinned: true, flexibleSpace: FlexibleSpaceBar( title: Text('復仇者聯盟'), background: Image.network( 'http://img.haote.com/upload/20180918/2018091815372344164.jpg', fit: BoxFit.fitHeight, ), ), )]; }, body: ListView.builder(itemBuilder: (BuildContext context,int index){ return Container( height: 80, color: Colors.primaries[index % Colors.primaries.length], alignment: Alignment.center, child: Text( '$index', style: TextStyle(color: Colors.white, fontSize: 20), ), ); },itemCount: 20,), )
效果如下：
與TabBar配合使用
用法如下：
NestedScrollView( headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { return[ SliverAppBar( expandedHeight: 230.0, pinned: true, flexibleSpace: Padding( padding: EdgeInsets.symmetric(vertical: 8), child: PageView(), ), ), SliverPersistentHeader( pinned: true, delegate: StickyTabBarDelegate( child: TabBar( labelColor: Colors.black, controller: this._tabController, tabs:[ Tab(text: '資訊'), Tab(text: '技術'), ], ), ), ), ]; }, body: TabBarView( controller: this._tabController, children:[ RefreshIndicator( onRefresh: (){ print(('onRefresh')); }, child: _buildTabNewsList(_newsKey, _newsList), ), _buildTabNewsList(_technologyKey, _technologyList), ], ), )
StickyTabBarDelegate 程式碼如下：
class StickyTabBarDelegate extends SliverPersistentHeaderDelegate { final TabBar child; StickyTabBarDelegate({@required this.child}); @override Widget build( BuildContext context, double shrinkOffset, bool overlapsContent) { return Container( color: Theme.of(context).backgroundColor, child: this.child, ); } @override double get maxExtent => this.child.preferredSize.height; @override double get minExtent => this.child.preferredSize.height; @override bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) { return true; } }
效果如下：
其他屬性
透過 scrollDirection 和 reverse 引數控制其滾動方向，用法如下：
NestedScrollView( scrollDirection: Axis.horizontal, reverse: true, ... )
scrollDirection滾動方向，分為垂直和水平方向。
reverse引數表示反轉滾動方向，並不是由垂直轉為水平，而是垂直方向滾動時，預設向下滾動，reverse設定false，滾動方向改為向上，同理水平滾動改為水平向左。
controller為滾動控制器，可以監聽滾到的位置，設定滾動的位置等，用法如下：
_scrollController = ScrollController(); //監聽滾動位置 _scrollController.addListener((){ print('${_scrollController.position}'); }); //滾動到指定位置 _scrollController.animateTo(20.0); CustomScrollView( controller: _scrollController, ... )
physics表示可滾動元件的物理滾動特性，具體檢視ScrollPhysics
交流
Flutter部落格地址（近200個控制元件用法）：http://laomengit.com
[e36605
]
Flutter 首頁必用元件NestedScrollView的示例詳解已經有241次圍觀
http://coctec.com/docs/program/show-post-233375.html
