如何使用BottomNavyBar在页面之间切换

BottomNavyBar 是一个流行的 Flutter 库，用于在应用底部创建一个具有多个选项卡的导航栏。以下是如何使用 BottomNavyBar 在页面之间切换的基础概念和相关步骤：

基础概念

BottomNavyBar: 一个 Flutter 库，用于在屏幕底部创建一个带有图标和文本的导航栏。
Tab Navigation: 允许用户在不同的页面或视图之间轻松切换的用户界面模式。

优势

直观的用户体验: 底部导航栏使得用户可以快速访问应用的主要功能区域。
节省屏幕空间: 相比于侧边栏或顶部导航栏，底部导航栏不会遮挡主要内容。
一致性: 许多流行的应用都采用这种设计，用户对此已经非常熟悉。

类型

固定式: 始终显示在屏幕底部。
可隐藏式: 可以通过滑动或其他交互方式隐藏。

应用场景

社交媒体应用: 如 Twitter 或 Instagram，用户可以在首页、搜索、通知和个人资料之间切换。
电商应用: 如淘宝或京东，用户可以在首页、分类、购物车和我的订单之间切换。

实现步骤

以下是一个简单的示例代码，展示如何在 Flutter 中使用 BottomNavyBar 进行页面切换：

import 'package:flutter/material.dart';
import 'package:bottom_navy_bar/bottom_navy_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 _currentIndex = 0;
  final List<Widget> _pages = [
    HomePage(),
    SearchPage(),
    NotificationsPage(),
    ProfilePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavyBar(
        selectedIndex: _currentIndex,
        onItemSelected: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BottomNavyBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
            activeColor: Colors.blue,
          ),
          BottomNavyBarItem(
            icon: Icon(Icons.search),
            title: Text('Search'),
            activeColor: Colors.purple,
          ),
          BottomNavyBarItem(
            icon: Icon(Icons.notifications),
            title: Text('Notifications'),
            activeColor: Colors.orange,
          ),
          BottomNavyBarItem(
            icon: Icon(Icons.person),
            title: Text('Profile'),
            activeColor: Colors.red,
          ),
        ],
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Home Page'));
  }
}

class SearchPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Search Page'));
  }
}

class NotificationsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Notifications Page'));
  }
}

class ProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Profile Page'));
  }
}