Flutter隐藏底部导航栏插件hidding_bottom_navigation_bar的使用

HiddingBottomNavigationBar 是一个轻量级库，用于创建和控制隐藏的底部导航栏。当向下滚动时，底部导航栏会消失；当向上滚动时，底部导航栏会重新出现。非常方便。

特性

简单且功能强大的 HiddingBottomNavigationBar。其实现方式与 Flutter 的 BottomNavigationBar 相同，并扩展了使导航栏隐藏或显示的功能。此外，还提供了 onHide 和 onAppear 回调，以满足您的需求。

开始使用

通过以下命令安装依赖：

flutter pub add hidding_bottom_navigation_bar

使用示例

完整示例代码

import 'package:flutter/material.dart';
import 'package:hidding_bottom_navigation_bar/hidding_bottom_navigation_bar.dart';

// 主应用类
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const HiddingBottomNavBarExample());
  }
}

// 主页面类
class HiddingBottomNavBarExample extends StatefulWidget {
  const HiddingBottomNavBarExample({super.key});

  [@override](/user/override)
  State<HiddingBottomNavBarExample> createState() => _HiddingBottomNavBarExampleState();
}

class _HiddingBottomNavBarExampleState extends State<HiddingBottomNavBarExample> {
  // 1. 声明 ScrollController
  final scrollController = ScrollController();

  // 页面列表
  late final List<Widget> _pages = [
    _Home(scrollController: scrollController),
    const _Tasks(),
    const _Settings()
  ];

  // 当前选中的页面索引
  int index = 0;

  // 更新页面索引的方法
  void setIndex(int position) => setState(() => index = position);

  [@override](/user/override)
  void dispose() {
    scrollController.dispose(); // 确保在销毁时释放 ScrollController
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[index], // 动态切换页面
      bottomNavigationBar: HiddingBottomNavigationBar(
        // 3. 将 ScrollController 传递给 HiddingBottomNavigationBar
        scrollController: scrollController,
        height: 70, // 设置导航栏高度
        type: FlexibleBottomNavigationBarType.fixed, // 导航栏类型
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'), // 首页图标
          BottomNavigationBarItem(icon: Icon(Icons.calendar_today), label: 'Tasks'), // 任务图标
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'), // 设置图标
        ],
        onTap: setIndex, // 处理点击事件
        currentIndex: index, // 当前选中索引
        onAppear: () => print('ESTOY APARECIENDO'), // 导航栏出现回调
        onHide: () => print('ESTOY DESAPARECIENDO'), // 导航栏隐藏回调
      ),
    );
  }
}

// 任务页面
class _Tasks extends StatelessWidget {
  const _Tasks({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Center(
      child: Text('Tasks'), // 显示任务文本
    );
  }
}

// 设置页面
class _Settings extends StatelessWidget {
  const _Settings({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Center(
      child: Text('Settings'), // 显示设置文本
    );
  }
}

// 首页页面
class _Home extends StatelessWidget {
  const _Home({
    super.key,
    required this.scrollController, // 接收 ScrollController
  });

  final ScrollController scrollController;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ListView.separated(
        // 2. 将 ScrollController 传递给 ListView
        controller: scrollController,
        separatorBuilder: (context, index) => const Divider(color: Colors.grey),
        itemCount: 150, // 列表项数量
        itemBuilder: (ctx, i) {
          return SizedBox(
            height: 50, // 每个列表项的高度
            child: Text('Elemento número ${i + 1} de Home'), // 列表项内容
          );
        });
  }
}