Flutter 去掉 TabBar 和 SliverAppBar 的空格

如何解决Flutter 去掉 TabBar 和 SliverAppBar 的空格

我想实现一个浮动的 AppBar，底部有一个固定的 TabBar。以下是测试代码（dartPad）：

Widget build(BuildContext context) {
return Scaffold(
  body: nestedScrollView(
    floatHeaderSlivers: true,headerSliverBuilder: (BuildContext context,bool innerBoxIsScrolled) {
      return <Widget>[
        SliverAppBar(
          backgroundColor: Colors.yellow,title: Text(
            "WhatsApp type sliver appbar",),centerTitle: true,pinned: true,floating: true,bottom: PreferredSize(
            preferredSize: Size.fromHeight(kToolbarHeight),child: Container(
              color: Colors.orange,alignment: Alignment.topLeft,child: TabBar(
                  isScrollable: true,indicatorColor: Colors.white,indicatorSize: TabBarIndicatorSize.label,controller: _tabController,labelPadding: EdgeInsets.only(
                      top: 13,bottom: 13,left: 16,right: 16),tabs: [
                    Text(
                      "TAB A",Text(
                      "TAB B",]),];
    },body: TabBarView(
      controller: _tabController,children: [
        TabA(),const Center(
          child: Text('display Tab 2',style: TextStyle(fontSize: 16,fontWeight: FontWeight.bold)),],);

}

我发现向下滚动时，它会在 TabBar 上有一个顶部填充。有什么办法可以去掉那个空间吗？我已经设置了 SliverAppBar 的工具栏高度，但即使我降低高度，该空间也会保持在那里。

向上滚动（显示应用栏）：

向下滚动（隐藏appbar，顶部黄色不隐藏）：

解决方法

只需设置属性 pinned: false

见documentation

固定→ bool 应用栏是否应在滚动视图开始时保持可见。 [...] 最后

同时从底部删除 tabBar：并将其添加到列内的 tabbarview 上方

,

感谢您的帮助。

最后，我还有另一个可以考虑的解决方案。我在这里发帖供其他人参考。

Widget build(BuildContext context) {
return Scaffold(
  body: NestedScrollView(
    floatHeaderSlivers: true,headerSliverBuilder: (BuildContext context,bool innerBoxIsScrolled) {
      return <Widget>[
        SliverAppBar(
          backgroundColor: Colors.yellow,title: Text(
            "WhatsApp type sliver appbar",),elevation: 0.0,forceElevated: false,pinned: false,floating: true,primary: false,centerTitle: false,titleSpacing: NavigationToolbar.kMiddleSpacing,automaticallyImplyLeading: false,SliverAppBar(
          backgroundColor: Colors.orange,pinned: true,titleSpacing: 0,toolbarHeight: 48,forceElevated: true,title: Align(
            alignment: Alignment.topLeft,child: TabBar(
                isScrollable: true,indicatorColor: Colors.white,indicatorSize: TabBarIndicatorSize.label,controller: _tabController,labelPadding: EdgeInsets.only(
                    top: 13,bottom: 13,left: 16,right: 16),tabs: [
                  Text(
                    "TAB A",Text(
                    "TAB B",]),];
    },body: TabBarView(
      controller: _tabController,children: [
        TabA(),const Center(
          child: Text('Display Tab 2',style: TextStyle(fontSize: 16,fontWeight: FontWeight.bold)),],);
}

基本上，我所做的是分离 2 个 SliverAppBar，一个不是固定和浮动的；另一个被固定。这使得上方的应用栏在向下滚动时消失并在向上滚动时显示，而标签栏将保持固定在那里。