flutter - 向下滚动时隐藏底部导航栏，反之亦然

Question

我在正文和底部导航栏中有一个列表。当帖子列表向下滚动时，我想用向下滑动动画隐藏底部导航栏，当向上滚动时，我想用向上滑动动画隐藏底部导航栏。怎么做？

Answer 1

虽然 Naveen 的解决方案完美运行，但我不喜欢使用 setState 来处理导航栏可见性的想法。每次用户改变滚动方向时，包括应用栏和主体在内的整个主页都会重建，这可能是一项昂贵的操作。我创建了一个单独的类来处理使用 ValueNotifier 跟踪当前隐藏状态的可见性。

class HideNavbar {
  final ScrollController controller = ScrollController();
  final ValueNotifier<bool> visible = ValueNotifier<bool>(true);

  HideNavbar() {
    visible.value = true;
    controller.addListener(
      () {
        if (controller.position.userScrollDirection ==
            ScrollDirection.reverse) {
          if (visible.value) {
            visible.value = false;
          }
        }

        if (controller.position.userScrollDirection ==
            ScrollDirection.forward) {
          if (!visible.value) {
            visible.value = true;
          }
        }
      },
    );
  }

  void dispose() {
    controller.dispose();
    visible.dispose();
  }
}

现在您要做的就是在主页小部件中创建 HideNavbar 的最终实例。

final HideNavbar hiding = HideNavbar();

现在将实例的 ScrollController 传递给 Scaffold 的 ListView 或 CustomScrollView 主体。

body: CustomScrollView(
          controller: hiding.controller,
          ...

然后用 ValueListenableBuilder 包围你的 bottomNavigationBar，它从 HideNavbar 实例中获取 ValueNotifier，然后设置bottomNavigationBar 的高度属性为 0 或任何其他值，具体取决于 ValueNotifier 的状态。

bottomNavigationBar: ValueListenableBuilder(
        valueListenable: hiding.visible,
        builder: (context, bool value, child) => AnimatedContainer(
          duration: Duration(milliseconds: 500),
          height: value ? kBottomNavigationBarHeight : 0.0,
          child: Wrap(
            children: <Widget>[
              BottomNavigationBar(
                type: BottomNavigationBarType.fixed,
                backgroundColor: Colors.blue,
                fixedColor: Colors.white,
                unselectedItemColor: Colors.white,
                items: const [
                  BottomNavigationBarItem(
                    icon: Icon(Icons.home),
                    title: Text('Home'),
                  ),
                  BottomNavigationBarItem(
                    icon: Icon(Icons.card_giftcard),
                    title: Text('Offers'),
                  ),
                  BottomNavigationBarItem(
                    icon: Icon(Icons.account_box),
                    title: Text('Account'),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),

这种方法避免了无数次重建，并且不需要任何外部库。您也可以将其实现为基于流的方法，但这需要另一个库，例如 dart:async 并且不会改变任何东西。请务必在 HomePage 的 dispose 函数中调用 HideNavbar 的 dispose 函数以清除所有使用的资源。