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

hideable_bottom_bar 是一个用于Flutter的插件，它允许您创建一个可以通过垂直滑动动画隐藏和显示的底部导航栏。以下是如何安装和使用这个插件的详细说明。

特性

• 创建一个可以动画到屏幕下方的底部导航栏。

安装

在您的Flutter项目的pubspec.yaml文件中添加以下依赖：

dependencies:
  hideable_bottom_bar: <latest_version>

请确保将<latest_version>替换为插件的最新版本号。

然后，在您的Dart代码库中添加以下导入语句：

import 'package:hideable_bottom_bar/hideable_bottom_bar.dart';

使用方法

要使用HideableBottomBar，需要将其放置在一个Stack中，并通过更改bottomPosition属性来实现动画效果。

示例代码

下面是一个完整的示例demo，展示如何使用hideable_bottom_bar插件：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int selectedIndex = 0;
  double bottomPosition = 0.0;

  String _text(int index) {
    switch (index) {
      case 0:
        return "Home";
      case 1:
        return "Search";
      case 2:
        return "Add";
      case 3:
        return "Profile";
      case 4:
        return "Settings";
      default:
        return "";
    }
  }

  Icon _icon(int index) {
    switch (index) {
      case 0:
        return Icon(Icons.home);
      case 1:
        return Icon(Icons.search);
      case 2:
        return Icon(Icons.add_circle_outline);
      case 3:
        return Icon(Icons.person_outline);
      case 4:
        return Icon(Icons.settings);
      default:
        return Icon(Icons.error);
    }
  }

  void toggleBottomBar() {
    setState(() {
      bottomPosition = bottomPosition == 0.0 ? -80.0 : 0.0; // Adjust this value as needed
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hideable Bottom Bar Example'),
      ),
      body: Stack(
        children: [
          Center(
            child: ElevatedButton(
              onPressed: toggleBottomBar,
              child: Text('Toggle Bottom Bar'),
            ),
          ),
          HideableBottomBar(
            selectedIndex: selectedIndex,
            bottomPosition: bottomPosition,
            children: List.generate(
              5,
              (index) => HideableBottomNavigationItem(
                index: index,
                name: _text(index),
                icon: _icon(index),
              ),
            ),
            onSelected: (c) {
              setState(() {
                selectedIndex = c.index;
              });
            },
          ),
        ],
      ),
    );
  }
}

解释

• selectedIndex：当前选中的导航项索引。
• bottomPosition：控制底部导航栏位置的变量，值为负数时，导航栏会向上移动并隐藏。
• children：生成的底部导航项列表。
• onSelected：选择导航项时的回调函数。

通过调整bottomPosition的值，您可以控制底部导航栏的显示和隐藏。上述示例提供了一个按钮，用于切换底部导航栏的可见性。您可以根据需求修改此逻辑以适应不同的应用场景。