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

Question

我NestedScrollView在这里使用并尝试将一个参数放入函数中内置的参数TabBar中。工作正常，但看起来已经节省了一些空间，这使得标签栏看起来很奇怪，上面有大的填充。知道如何删除这个空间吗？提前致谢。bottomSliverAppBarheaderSliverBuilderTabBarSliverAppBartitle

动图

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

Answer 1

您可以使用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背景图像，这就是标签栏没有白色背景的原因。

结果：