使用 Flutter 在滚动时隐藏或显示底部导航栏

ScrollBottomNavigationBar

在滚动时隐藏或显示底部导航栏。

路线图

这是我们当前的路线图，请随时提出添加/更改的建议。

用法

入门

将 scroll_bottom_navigation_bar 包添加到您的项目中。您可以按照此步骤进行操作。

基本实现

首先，您需要一个 ScrollBottomNavigationBarController 实例。如果您需要自定义 ScrollController，可以在构造函数中传递该实例。

final controller = ScrollBottomNavigationBarController(); 

现在，您可以在 Scaffold 小部件中使用 ScrollBottomNavigationBar 小部件，并在 body 中的可滚动小部件中附加 ScrollController 实例。

为了简化您的代码，您可以使用 ScrollBody 小部件作为您的可滚动小部件。此小部件负责在底部导航栏中交换项目。

注意： 只显示必要代码。完整的实现请参阅示例部分。

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: ScrollBody(
      scrollBottomNavigationBarController: controller,
      builder: (context, index) => container(index),
    ),
    bottomNavigationBar: ScrollBottomNavigationBar(
      scrollBottomNavigationBarController: controller,
      items: items,
    ),
  );
}

ScrollBottomNavigationBarController

您可以使用 ScrollBottomNavigationBarController 实例来管理底部导航栏的行为。

// Custom scroll controller
final scrollController = ScrollController();

final controller = ScrollBottomNavigationBarController(
  scrollController: scrollController,
  snap: true, // snap effect
); 

切换页面

controller.changePage(page);

检查固定状态

controller.isPinned;

Pin（固定）

controller.setPinState(true);

取消固定

controller.setPinState(false);

切换固定状态

controller.tooglePin();

检查吸附状态

controller.snap;

Snap

controller.setSnapState(true);

解除吸附

controller.setSnapState(false);

切换吸附状态

controller.toogleSnap();

监听页面变化

controller.pageListener((index) => print(index));

处置

controller.dispose();

示例

您还可以查看示例以获取更多信息。

Snapshots

GitHub

https://github.com/EdsonOnildoJR/scroll_bottom_navigation_bar