昨天Flutter 1.17版本重磅釋出，新的版本主要是優化效能、修復bug，有人覺得此版本毫無亮點，但也從另一方面體現了Flutter目前針對移動端已經較為完善，想了解具體內容，文末有連結，如果你想升級到最新版本，建議慎重，有些人升級後項目無法執行。

今天介紹的元件是NestedScrollView，大部分的App首頁都會用到這個元件。

可以在其內部巢狀其他滾動檢視的滾動檢視，其滾動位置是固有連結的。

在普通的ScrollView中， 如果有一個Sliver元件容納了一個TabBarView，它沿相反的方向滾動（例如，允許使用者在標籤所代表的頁面之間水平滑動，而列表則垂直滾動），則該TabBarView

滾動隱藏AppBar

比如實現如下場景，當列表滾動時，隱藏AppBar，用法如下：

NestedScrollView(
 headerSliverBuilder: (BuildContext context,bool innerBoxIsScrolled) {
  return <Widget>[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 <Widget>[SliverAppBar(
   expandedHeight: 230.0,pinned: true,flexibleSpace: FlexibleSpaceBar(
    title: Text('復仇者聯盟'),background: Image.network(
     'http://img.haote.com/upload/20180918/2018091815372344164.jpg',fit: BoxFit.fitHeight,)

效果如下：

與TabBar配合使用

用法如下：

NestedScrollView(
 headerSliverBuilder: (BuildContext context,bool innerBoxIsScrolled) {
  return <Widget>[
   SliverAppBar(
    expandedHeight: 230.0,flexibleSpace: Padding(
     padding: EdgeInsets.symmetric(vertical: 8),child: PageView(),SliverPersistentHeader(
    pinned: true,delegate: StickyTabBarDelegate(
     child: TabBar(
      labelColor: Colors.black,controller: this._tabController,tabs: <Widget>[
       Tab(text: '資訊'),Tab(text: '技術'),],];
 },body: TabBarView(
  controller: this._tabController,children: <Widget>[
   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

總結

到此這篇關於Flutter 首頁必用元件NestedScrollView的文章就介紹到這了,更多相關Flutter 首頁必用元件NestedScrollView內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！