我正在尝试使用顶部应用栏和下方的标签栏创建应用。向下滚动时,条形图应该通过移出屏幕隐藏(但标签应该保留),当您向上滚动时,应该再次显示应用程序栏。这种行为可以在WhatsApp中看到。请参阅this视频进行演示。 (摘自Material.io)。 This是一个类似的行为,虽然应用栏和标签栏隐藏在滚动,所以它不是我正在寻找的行为。
我已经能够实现自动隐藏,但是,有一些问题:
snap
的SliverAppBar
设置为true
。如果没有这个,当我向上滚动时,应用栏将不会显示。
虽然这是有效的,但这不是我正在寻找的行为。我希望应用程序栏能够顺利显示(类似于WhatsApp),而不是即使你滚动很少也不会进入视图。这是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 repository。 main.dart
是here。
我也发现了这个相关的问题:Hide Appbar on Scroll Flutter?。但是,它没有提供解决方案。同样的问题仍然存在,当你向上滚动时,SliverAppBar
将不会显示。 (所以需要snap: true
)
我还在Flutter的GitHub上找到了this issue。 (编辑:有人评论说他们正在等待Flutter团队解决这个问题。是否有可能没有解决方案?)
这是flutter doctor -v
:Pastebin的输出。找到了某些问题,但从我所学到的,它们不应该产生影响。