Flutter 移除 TabBar 和 SliverAppBar 中的空白间隙

Question

我想实现一个带有固定标签栏的悬浮AppBar，标签栏位于底部。以下是测试代码（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的工具栏高度，但即使我降低高度，该空间仍将保留。

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

向下滚动（隐藏应用栏，顶部的黄色区域未被隐藏）：

- CbL

---

你尝试在Scaffold中使用AppBar属性了吗？ - Kab Agouda

你尝试过添加属性 isDense: true 吗？ - Antonin GAVREL

@KabirouAgouda 是的，我已经尝试过了，结果也是一样的。 - CbL

@AntoninGAVREL 抱歉，我没有看到SliverAppBar中有isDense参数。 - CbL

@AntoninGAVREL 的 isDense 属性仅适用于 DropDownButton 或 InputDecoration 中。 - Kab Agouda

Answer 1

如果你使用ListView，请添加这行代码

ListView.builder(
            padding: EdgeInsets.zero,

- artemitSoft

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

基本上，我所做的是将两个SliverAppBar分开，一个不固定且浮动；另一个是固定的。这使得当向下滚动时，上部的应用栏会消失并在向上滚动时显示，而选项卡栏将保持固定。

- CbL

Answer 3

只需设置属性 pinned: false

参见 文档

pinned → bool 应用栏是否应该在滚动视图的开头保持可见。 [...] 最终

还需将底部的 tabBar 移除，并将其添加到 tabbarview 上面的 column 中。

- Antonin GAVREL