Flutter 去掉空格 TabBar 和 SliverAppBar答案

【问题标题】：Flutter remove the space TabBar and SliverAppBarFlutter 去掉空格 TabBar 和 SliverAppBar
【发布时间】：2021-05-14 20:46:05
【问题描述】：

我想实现一个浮动 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，顶部黄色不隐藏）：

【问题讨论】：

你试试脚手架内的appbar属性吗？
您是否尝试添加属性isDense: true ？
@KabirouAgouda 是的，我试过了，结果一样
@AntoninGAVREL 抱歉，我没有看到 SliverAppBar 中有 isDense 参数
@AntoninGAVREL isDense 属性仅在 DropDownButton 或 InputDecoration 内

标签： flutter flutter-sliverappbar

【解决方案1】：

只需设置属性pinned: false

见documentation

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

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

【讨论】：

【解决方案2】：

感谢您的帮助。

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

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,
          primary: false,
          centerTitle: false,
          titleSpacing: 0,
          toolbarHeight: 48,
          automaticallyImplyLeading: false,
          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，一个不固定和浮动；另一个是固定的。这使得顶部的应用栏在向下滚动时消失，在向上滚动时显示，而标签栏将一直固定在那里。

【讨论】：