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

你可能感兴趣的:(flutter)