如何删除 SliverAppBar 中的空白区域?

2024-01-20

我在用着NestedScrollView在这里并试图放一个TabBar in the bottom的参数SliverAppBar这是建立在headerSliverBuilder功能。这TabBar工作正常,但看起来像SliverAppBar已幸免于难title一些空间使标签栏看起来很奇怪,上面有大的填充。知道如何删除这个空间吗?提前致谢。

GIF https://i.stack.imgur.com/csC1U.gif

 @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;
    double screenHeight = MediaQuery.of(context).size.height;
    return Scaffold(
      body: SafeArea(
          child: NestedScrollView(
            headerSliverBuilder: (context, value){
              return[
                SliverOverlapAbsorber(
                  handle:NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                  sliver: SliverAppBar(
                    pinned: true,
                    floating: false,
                    expandedHeight: 500,
                    title: Text("Space that I don't want"),
                    centerTitle: true,
                    flexibleSpace: FlexibleSpaceBar(
                      collapseMode: CollapseMode.pin,
                      background: Container(
                        decoration: BoxDecoration(
                          color: Colors.white,
                          image: DecorationImage(
                            image: AssetImage("assets/images/classroom.png")
                          )
                        ),
                        child: Center(child: Text("Today's lesson cancelled", style: GoogleFonts.montserrat(textStyle: TextStyle(color: Colors.white, fontSize:20, fontWeight: FontWeight.w500),)))
                      ),
                    ),
                    bottom: TabBar(
                      controller: _controller,
                      labelColor: Colors.black,
                      indicatorColor: Colors.black,
                      unselectedLabelColor: Colors.grey,
                      tabs: _tabs.map((String name) => Tab(text: name)).toList()
                    )
                  )
                ),
              ];
            },
            body: TabBarView(
                    controller: _controller,
                    children: (_tabs.map((String name){
                      return SafeArea(
                        child:Builder(
                          builder: (BuildContext context){
                            return CustomScrollView(
                              key: PageStorageKey<String>(name),
                              slivers: <Widget>[
                                SliverOverlapInjector(
                                    handle:NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                                ),
                                SliverToBoxAdapter(
                                  child: _buildLeaderBoardTab(screenWidth,screenHeight)
                                )
                              ],
                            );
                          },
                        )
                      );
                    })).toList(),
                  )
        )
      )
    );
  }

您可以用一个包裹标签栏PreferredSize高度为 0 的小部件:

SliverOverlapAbsorber(
                      handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
                          context),
                      sliver: SliverAppBar(
                        bottom: PreferredSize(
                          preferredSize: const Size.fromHeight(0),
                          child: TabBar(
                              controller: _controller,
                              labelColor: Colors.black,
                              indicatorColor: Colors.black,
                              unselectedLabelColor: Colors.grey,
                              tabs: _tabs
                                  .map((String name) => Tab(text: name))
                                  .toList()),
                        ),
                        pinned: true,
                        floating: false,
                        expandedHeight: 500,
                        backgroundColor: Colors.white,
                        flexibleSpace: FlexibleSpaceBar(
                          collapseMode: CollapseMode.pin,
                          background: Container(
                            child: child: Center(child: Text("Today's lesson cancelled", style: GoogleFonts.montserrat(textStyle: TextStyle(color: Colors.white, fontSize:20, fontWeight: FontWeight.w500),)))
                            decoration: BoxDecoration(
                                color: Colors.white,
                                image: DecorationImage(
                                    fit: BoxFit.cover,
                                    image: DecorationImage(
                            image: AssetImage("assets/images/classroom.png")
                          )
                        ),
                      )),

注:我用过fit: BoxFit.cover对于背景图像,这就是标签栏没有白色背景的原因。

Result:

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何删除 SliverAppBar 中的空白区域? 的相关文章