Flutter自定义底部导航栏插件defaul_tap_bar的使用

在Flutter中，自定义底部导航栏是一个常见的需求。虽然Flutter自带了BottomNavigationBar，但有时我们需要更灵活的定制。如果你使用的是一个名为default_tap_bar的插件（假设这是一个第三方插件），以下是如何使用它的基本步骤。

首先，确保你已经在pubspec.yaml文件中添加了这个插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  default_tap_bar: ^1.0.0  # 假设版本号为1.0.0，请根据实际情况填写

然后执行flutter pub get来获取依赖。

使用 default_tap_bar 插件

假设default_tap_bar插件提供了一个类似于DefaultTapBar的组件，你可以按照以下步骤使用它：

1. 导入插件： 在你的Dart文件中导入插件：

   import 'package:default_tap_bar/default_tap_bar.dart';
   

2. 创建页面： 创建几个你想要在底部导航栏中切换的页面。例如：

   class HomePage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(title: Text('Home')),
         body: Center(child: Text('Home Page')),
       );
     }
   }
   
   class SearchPage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(title: Text('Search')),
         body: Center(child: Text('Search Page')),
       );
     }
   }
   
   class ProfilePage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(title: Text('Profile')),
         body: Center(child: Text('Profile Page')),
       );
     }
   }
   

3. 使用 DefaultTapBar： 在你的主页面中使用DefaultTapBar来管理页面切换。假设DefaultTapBar的使用方式类似于BottomNavigationBar，你可以这样做：

   import 'package:flutter/material.dart';
   import 'package:default_tap_bar/default_tap_bar.dart';
   
   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: MyHomePage(),
       );
     }
   }
   
   class MyHomePage extends StatefulWidget {
     @override
     _MyHomePageState createState() => _MyHomePageState();
   }
   
   class _MyHomePageState extends State<MyHomePage> {
     int _selectedIndex = 0;
   
     final List<Widget> _pages = [
       HomePage(),
       SearchPage(),
       ProfilePage(),
     ];
   
     void _onItemTapped(int index) {
       setState(() {
         _selectedIndex = index;
       });
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         body: _pages[_selectedIndex],
         bottomNavigationBar: DefaultTapBar(
           currentIndex: _selectedIndex,
           onTap: _onItemTapped,
           items: [
             DefaultTapBarItem(icon: Icon(Icons.home), label: 'Home'),
             DefaultTapBarItem(icon: Icon(Icons.search), label: 'Search'),
             DefaultTapBarItem(icon: Icon(Icons.person), label: 'Profile'),
           ],
         ),
       );
     }
   }
   

4. 运行应用： 现在你可以在模拟器或设备上运行应用，查看自定义底部导航栏的效果。

注意事项

• DefaultTapBar的具体使用方式可能会根据插件的实际实现有所不同。请参考插件的文档或源码来了解更多细节。
• 如果default_tap_bar插件并不存在，你可能需要寻找其他类似的插件，或者自己实现一个自定义的底部导航栏。

自定义底部导航栏的实现

如果你找不到合适的插件，或者想自己实现一个自定义的底部导航栏，可以参考以下代码：

class CustomBottomNavigationBar extends StatelessWidget {
  final int currentIndex;
  final Function(int) onTap;

  CustomBottomNavigationBar({
    required this.currentIndex,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return BottomAppBar(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          IconButton(
            icon: Icon(Icons.home),
            color: currentIndex == 0 ? Colors.blue : Colors.grey,
            onPressed: () => onTap(0),
          ),
          IconButton(
            icon: Icon(Icons.search),
            color: currentIndex == 1 ? Colors.blue : Colors.grey,
            onPressed: () => onTap(1),
          ),
          IconButton(
            icon: Icon(Icons.person),
            color: currentIndex == 2 ? Colors.blue : Colors.grey,
            onPressed: () => onTap(2),
          ),
        ],
      ),
    );
  }
}

然后在Scaffold中使用这个自定义的底部导航栏：

bottomNavigationBar: CustomBottomNavigationBar(
  currentIndex: _selectedIndex,
  onTap: _onItemTapped,
),