向下滚动时隐藏的Flutter TabBar和SliverAppBar

问题描述 投票:4回答:2

我正在尝试使用顶部应用栏和下方的标签栏创建应用。向下滚动时,条形图应该通过移出屏幕隐藏(但标签应该保留),当您向上滚动时,应该再次显示应用程序栏。这种行为可以在WhatsApp中看到。请参阅this视频进行演示。 (摘自Material.io)。 This是一个类似的行为,虽然应用栏和标签栏隐藏在滚动,所以它不是我正在寻找的行为。

我已经能够实现自动隐藏,但是,有一些问题:

  1. 我必须将snapSliverAppBar设置为true。如果没有这个,当我向上滚动时,应用栏将不会显示。 虽然这是有效的,但这不是我正在寻找的行为。我希望应用程序栏能够顺利显示(类似于WhatsApp),而不是即使你滚动很少也不会进入视图。
  2. 当我向下滚动并更改标签时,会删除一些内容。 以下是显示行为的GIF: GIF demonstrating output (当我在listView(tab1)上向下滚动时,请参阅该部分,然后返回到tab2)

这是DefaultTabController的代码:

DefaultTabController(
  length: 2,
  child: new Scaffold(
    body: new NestedScrollView(
      headerSliverBuilder:
          (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          new SliverAppBar(
            title: Text("Application"),
            floating: true,
            pinned: true,
            snap: true,    // <--- this is required if I want the application bar to show when I scroll up
            bottom: new TabBar(
              tabs: [ ... ],    // <-- total of 2 tabs
            ),
          ),
        ];
      },
      body: new TabBarView(
        children: [ ... ]    // <--- the array item is a ListView
      ),
    ),
  ),
),

如果需要,完整的代码在这个GitHub repositorymain.darthere

我也发现了这个相关的问题:Hide Appbar on Scroll Flutter?。但是,它没有提供解决方案。同样的问题仍然存在,当你向上滚动时,SliverAppBar将不会显示。 (所以需要snap: true

我还在Flutter的GitHub上找到了this issue。 (编辑:有人评论说他们正在等待Flutter团队解决这个问题。是否有可能没有解决方案?)

这是flutter doctor -vPastebin的输出。找到了某些问题,但从我所学到的,它们不应该产生影响。

android dart flutter flutter-layout flutter-sliver
2个回答
© www.soinside.com 2019 - 2024. All rights reserved.