flutter,SliverPersistentHeader實現Tab頂部吸附固定效果

直接上代碼啦

import 'package:flutter/material.dart';

class StickyDemo extends StatefulWidget {
 
  @override
  _StickyDemoState createState() => _StickyDemoState();
}

class _StickyDemoState extends State<StickyDemo>
    with SingleTickerProviderStateMixin {
  TabController tabController;

  @override
  void initState() {
    super.initState();
    this.tabController = TabController(length: 2, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            elevation: 0,
            expandedHeight: 250,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('Sliver-sticky效果'),
              background: Image.network(
                'http://img1.mukewang.com/5c18cf540001ac8206000338.jpg',
                fit: BoxFit.cover,
              ),
            ),
          ),
          SliverPersistentHeader(
            pinned: true,
            delegate: StickyTabBarDelegate(
              child: TabBar(
                labelColor: Colors.black,
                controller: this.tabController,
                tabs: <Widget>[
                  Tab(text: 'Home'),
                  Tab(text: 'Profile'),
                ],
              ),
            ),
          ),
          SliverFillRemaining(
            child: TabBarView(
              controller: this.tabController,
              children: <Widget>[
                Center(child: Text('Content of Home')),
                Center(child: Text('Content of Profile')),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class StickyTabBarDelegate extends SliverPersistentHeaderDelegate {
  final TabBar child;

  StickyTabBarDelegate({@required this.child});

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return 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;
  }
}

　　

往下滑動效果圖：

最后tab就吸附固定在頂部了；再往上滑動，頂部的圖片就會出現了；

更詳細的請看原博客 https://segmentfault.com/a/1190000019902201

這是一種實現方式，當然還有其他方式，他們三也可以實現NestedScrollViewRefreshIndicator、NestedScrollView和SliverPersistentHeader，以下代碼是項目的代碼，使用結構簡單寫下，其中有用到Bloc模式，但是和實現效果無關哈

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;
  }