在 Scroll Flutter 上隐藏 Appbar? [英] Hide Appbar on Scroll Flutter?

问题描述

考虑一下这张图片.如您所见，它有一个应用栏，并且该应用栏有选项卡式按钮.我正在尝试为 appbar 设置动画，以便它在滚动时隐藏并只留下 Tab Buttons 显示，并且在向上滚动时 appbar 出现.请帮帮我.对不起，英语不好，不是美国人，我也不是英语

Consider this image. As you can see it has an appbar and the appbar has Tabbed buttons. Am trying to animate the appbar so that it hides on scrollup and leaves only the Tab Buttons showing and on scrollup the appbar apears. Please help me out. Sorry for bad english and not American neither am I English

推荐答案

如果我理解正确，下面的代码应该使应用栏在滚动时隐藏，而 TabBar 保持可见:

If I understood you correctly, following code should make the app bar hide on scroll while TabBar remains visible:

空安全码:

class _SomePageState extends State<SomePage> with SingleTickerProviderStateMixin {
  late final TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              title: Text('Weight Tracker'),
              pinned: true,
              floating: true,
              forceElevated: innerBoxIsScrolled,
              bottom: TabBar(
                tabs: <Tab>[
                  Tab(text: 'STATISTICS'),
                  Tab(text: 'HISTORY'),
                ],
                controller: _tabController,
              ),
            ),
          ];
        },
        body: TabBarView(
          controller: _tabController,
          children: <Widget>[
            StatisticsPage(),
            HistoryPage(),
          ],
        ),
      ),
    );
  }
}

示例来自这篇文章.

这篇关于在 Scroll Flutter 上隐藏 Appbar?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！