Flutter|flutter控件----NestedScrollView+TabBar+TabBarView实现折叠顶部布局 Flutter|Flutter探索记

一、概述 NestedScrollView+TabBar+TabBarView实现TabBar滑动吸附在顶部。

二、开始编码 【Flutter|flutter控件----NestedScrollView+TabBar+TabBarView实现折叠顶部布局】本次代码以NestedScrollView(当然也可以用CustomScrollView实现，实现方法基本一致)的headerSliverBuilder实现滑动的顶部布局，其中SliverPersistentHeader实现吸附在顶部的TabBar。body中放TabBarView实现页面切换。（flutter的滑动家族还是值得好好学习一番的。此次代码是根据官网提供的例子而改写的）
以下代码注释还是挺详细的，

@override Widget build(BuildContext context) { double statusBarHeight = MediaQuery.of(context).padding.top; ///轮播图高度 double _swiperHeight = 326 + 10.0; ///提示头部高度 double _spikeHeight = 80; ///_appBarHeight算的是AppBar的bottom高度，kToolbarHeight是APPBar高，statusBarHeight是状态栏高度 double _appBarHeight = _swiperHeight + _spikeHeight - kToolbarHeight - statusBarHeight; return NestedScrollView( headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { return [ SliverOverlapAbsorber( handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),///SliverAppBar也可以实现吸附在顶部的TabBar，但是高度不好计算，总是会有AppBar的空白高度， ///所以我就用了SliverPersistentHeader来实现这个效果，SliverAppBar的bottom中只放TabBar顶部的布局 child: SliverAppBar( backgroundColor: Color(0xfff1f1f1), forceElevated: innerBoxIsScrolled, bottom: PreferredSize( child: Container(), preferredSize: Size.fromHeight(_appBarHeight)),///TabBar顶部收缩的部分 flexibleSpace: Column( children: [ _swiper(), _spike(), ], ), ), ),///停留在顶部的TabBar SliverPersistentHeader( delegate: _SliverAppBarDelegate(_timeSelection()), pinned: true, ), ]; }, body: TabBarView(controller: _timeTabController, children: [ _listItem(), _listItem(), _listItem(), _listItem(), _listItem(), _listItem(), ]), ); }

///TabBar的代理 class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate { _SliverAppBarDelegate(this._tabBar); final Stack _tabBar; @override Widget build( BuildContext context, double shrinkOffset, bool overlapsContent) { return _tabBar; }@override double get maxExtent => 55; @override double get minExtent => 55; @override bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) { return true; } }

三、总结吸附顶部的TabBar效果搞了我一整天，尝试了各种办法，兜兜转转发现还是NestedScrollView的实现方式比较简单。但是其中的SliverAppBar的吸附效果搞得我实在头疼，高度总是计算失误，没有默认APPBar的SliverAppBar顶部总是有一段空白，最后没办法只能转变方式，利用SliverPersistentHeader来实现吸附功能，SliverAppBar中只存放顶部的布局。不管中间怎么折腾，能抓住耗子的就是好猫，这也不失为一种有效的解决办法吧。
源码下载