1

我想实现一个浮动 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，顶部黄色不隐藏）：在此处输入图像描述

4

2 回答 2

1

只需设置属性pinned: false

查看文档

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

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

于 2021-02-11T06:33:00.753 回答
0

感谢您的帮助。

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

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，一个没有固定和浮动；另一个是固定的。这使得顶部的应用栏在向下滚动时消失并在向上滚动时显示，而标签栏将继续固定在那里。

于 2021-02-11T10:29:20.520 回答