flutter中tabbar吸顶效果,NestedScrollView结合tabbar

前言:有这样一个业务场景,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);
              }
            }
          },
        ),
      ),
    );

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Flutter是一种跨平台的移动应用开发框架,可以方便地创建漂亮且高性能的移动应用。滚动吸顶TabBar是指在页面滚动过程TabBar能够固定在页面的顶部,以保持在用户视野内,并且随着页面的滚动而切换选项卡。 为了实现滚动吸顶TabBar,我们可以使用Flutter提供的ScrollController来监听页面的滚动,并根据滚动的位置来决定TabBar的状态。 首先,我们需要创建一个ScrollController对象,并将其传递给滚动的可滚动组件(例如ListView、ScrollView等)的controller属性。 然后,我们可以使用ScrollController的addListener方法来监听滚动过程的位置变化。在listener,我们可以根据滚动的位置来判断是否需要将TabBar固定在顶部,或者将其恢复到正常位置。 具体的实现步骤如下: 1. 创建一个滚动控制器对象:ScrollController _scrollController = ScrollController(); 2. 将滚动控制器对象传递给可滚动组件的controller属性:ListView(controller: _scrollController, ...) 3. 在页面构建方法使用ScrollController的addListener方法:_scrollController.addListener(() { if (_scrollController.offset > 0) { // 需要吸顶处理 } else { // 恢复正常位置 } }); 4. 在需要吸顶处理的地方,将TabBar固定在顶部,例如将TabBar放在一个Stack组件,并设置其alignment属性为Alignment.topCenter。 5. 在需要恢复正常位置的地方,将TabBar恢复到原始位置。 通过以上的步骤,我们就可以实现滚动吸顶TabBar效果了。需要注意的是,根据实际情况,可能还需要处理一些细节,例如切换选项卡时的动画效果等。可以根据具体需求进行相应的调整和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值