前言:有这样一个业务场景,tabbar在中间,向上滑动时,tabbar需要有吸顶效果
结合网上的资料,了解到可以使用NestedScrollView+SliverAppBar来实现,但是会遇到一些问题
问题1:tabbarView中的内容顶部会被tabbar遮挡掉
为了解决问题1,根据网上教程采用SliverOverlapAbsorber+SliverOverlapInjector处理
但是这个方法还是有问题
tabbarView滑动还是会相互受到影响,比如从下往上滑的时候,右侧的也受到影响了
最终采用的方案
1、不使用SliverOverlapAbsorber+SliverOverlapInjector这一套,因为有问题存在
2、采用tabbar+PageView的方式,当页面切换时主动修改scroller的坐标
最终代码如下
return Scaffold(
body: NestedScrollView(
controller: _scrollViewController,
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return [
SliverAppBar(
pinned: true,
leading: Container(),
floating: true,
expandedHeight: 600 + outHeight,
backgroundColor: Colors.white,
flexibleSpace: FlexibleSpaceBar(
collapseMode: CollapseMode.pin,
background: Container(
height: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//这里是内容这里是内容
deliver(height: 60),
],
),
),
),
bottom: PreferredSize(
preferredSize: Size.fromHeight(50),
child: Container(
width: double.maxFinite,
child: TabBar(
tabs: tabs,
onTap: (index) {
// page.animateTo(index, duration: duration, curve: curve)
page.jumpToPage(index);
},
controller: _tabController,
indicatorWeight: 2,
indicatorSize: TabBarIndicatorSize.label,
labelColor: Colors.black,
isScrollable: true,
labelStyle: TextStyle(
fontSize: 16,
),
unselectedLabelColor:
Color.fromRGBO(156, 166, 175, 1), //未选中的颜色
),
),
),
)
];
},
// body: TabBarView(
// controller: _tabController,
// children: getTabContent(),
// ),
body: PageView(
controller: page,
children: getTabContent(),
onPageChanged: (index) {
_tabController.animateTo(index);
print(_scrollViewController.offset);
if (index == 1) {
if (_scrollViewController.offset > 600) {
_scrollViewController.jumpTo(_scrollViewController.offset - 70);
}
}
},
),
),
);