フラッター、トップタブで達成SliverPersistentHeader吸引アンカー効果

直接コードをその上に

インポート'パッケージ：フラッター/ material.dart'; 

クラスStickyDemoは{StatefulWidgetを拡張
 
  @Override 
  _StickyDemoState createState（）=> _StickyDemoState（）; 
} 

クラス_StickyDemoStateはステート<StickyDemo>を拡張
    SingleTickerProviderStateMixin {と
  TabController tabController。

  @Override 
  ボイドinitState（）{ 
    super.initState（）。
    this.tabController = TabController（長さ：2、VSYNC：本）。
  } 

  @Override 
  ウィジェット（BuildContextコンテキスト）{構築
    リターン足場（
      本体：CustomScrollView（
        スライバ：<ウィジェット> [ 
          SliverAppBar（
            ピン：真、
            標高：0、
            expandedHeight：250、
            flexibleSpace：FlexibleSpaceBar（
              タイトル：テキスト（ 'スリヴァー-スティッキー效果'）、
              バックグラウンド：Image.network（
                'http://img1.mukewang.com/5c18cf540001ac8206000338.jpg'、
                フィット：BoxFit。カバー、
              ）、 
            ）、
          ）、 
          SliverPersistentHeader（
            ピン：真、
            デリゲート：StickyTabBarDelegate（
              子：TabBarの（
                labelColor：Colors.black、
                コントローラ：this.tabController、
                タブ<ウィジェット> [ 
                  タブ（テキスト： 'ホーム'）、
                  タブ（テキスト： 'プロフィール'）を、 
                ]、 ）、
              ）、
            
          ）、
          SliverFillRemaining（
            子：TabBarView（
              コントローラ：this.tabController、
              子供：<ウィジェット> [ 
                センター（子：テキスト（ 'ホームページのコンテンツ'））、
                センター（子：テキスト（ 'プロフィールの内容'））、
              ]、 
            ）、
          ）、 
        ]、 
      ）、
    ）; 
  } 
} 

クラスStickyTabBarDelegateはSliverPersistentHeaderDelegate {延び
  最終TabBarの子と、

  StickyTabBarDelegate（{@必要this.child}）。

  @オーバーライド
  ウィジェットビルド（BuildContextコンテキスト、ダブルshrinkOffset、BOOL overlapsContent）{ 
    this.child返します。
  } 

  @Override 
  ダブルGET maxExtent => this.child.preferredSize.height。

  @Override 
  ダブルGET minExtent => this.child.preferredSize.height。

  @Overrideの
  ブールshouldRebuild（SliverPersistentHeaderDelegate oldDelegate）{ 
    trueを返します。
  } 
}

　　

効果ダウン図のスライド：

固定吸着の上に最後のタブ、スライドを下る、絵はの上部に表示されます。

オリジナルのブログでより詳しく見  https://segmentfault.com/a/1190000019902201

これは、達成するための方法ですが、もちろん、他の方法があり、そのうちの3はNestedScrollViewRefreshIndicator、NestedScrollViewと達成することができますSliverPersistentHeaderを、次のコードは、プロジェクトのコードで、シンプル圏モードに役立つ構造、が、結果を達成するために何もしてカザフスタンを書き留め

NestedScrollViewRefreshIndicator(
        onRefresh: onRefresh,
        child: NestedScrollView(
          headerSliverBuilder: (c, f) {
            return buildSliverHeader(_appBarHeight, applicationBloc);
          },
          body: Column(
            children: <Widget>[
              primaryTabBar,
              Expanded(
                child: TabBarView(
              　　controller: this.tabController,
              　　children: <Widget>[
                　　Center(child: Text('Content of Home')),
                　　Center(child: Text('Content of Profile')),
              　　],
            　　),
              ),
            ],
          ),
        ),
      ),

var primaryTabBar = Container(
      height: 36,
      child: TabBar(
              labelColor: Colors.black,
              controller: this.tabController,
              tabs: <Widget>[
                 Tab(text: 'Home'),
               　Tab(text: 'Profile'),
                ],
              ),
    );

 List<Widget> buildSliverHeader(appBarHeight, applicationBloc) {
    var widgets = <Widget>[];
    widgets.add(
      SliverPersistentHeader(
        pinned: false,
        delegate: _SliverAppBarDelegate(
            Column(),
            appBarHeight),
      ),
    );
    return widgets;
  }