Flutter自定义导航栏插件ruki_nav_bar的使用

ruki_nav_bar 是一个用于 Flutter 的自定义导航栏插件，它允许开发者轻松地创建和自定义底部导航栏。以下是如何使用 ruki_nav_bar 插件的详细步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 ruki_nav_bar 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  ruki_nav_bar: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

在你的 Dart 文件中导入 ruki_nav_bar 包。

import 'package:ruki_nav_bar/ruki_nav_bar.dart';

3. 使用 RukiNavBar

RukiNavBar 是一个自定义的底部导航栏组件，你可以通过传递 items 和 onTap 回调来使用它。

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ruki Nav Bar Example'),
      ),
      body: Center(
        child: Text('Selected Index: $_currentIndex'),
      ),
      bottomNavigationBar: RukiNavBar(
        items: [
          RukiNavBarItem(icon: Icons.home, title: 'Home'),
          RukiNavBarItem(icon: Icons.search, title: 'Search'),
          RukiNavBarItem(icon: Icons.person, title: 'Profile'),
        ],
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

4. 自定义导航栏

RukiNavBar 提供了多种自定义选项，例如颜色、图标大小、文字样式等。

RukiNavBar(
  items: [
    RukiNavBarItem(icon: Icons.home, title: 'Home'),
    RukiNavBarItem(icon: Icons.search, title: 'Search'),
    RukiNavBarItem(icon: Icons.person, title: 'Profile'),
  ],
  currentIndex: _currentIndex,
  onTap: (index) {
    setState(() {
      _currentIndex = index;
    });
  },
  selectedColor: Colors.blue, // 选中项的颜色
  unselectedColor: Colors.grey, // 未选中项的颜色
  iconSize: 24.0, // 图标大小
  fontSize: 14.0, // 文字大小
  backgroundColor: Colors.white, // 背景颜色
  elevation: 8.0, // 阴影高度
);

5. 处理导航栏点击事件

onTap 回调函数用于处理导航栏项的点击事件。你可以根据 index 来更新页面内容或导航到其他页面。

onTap: (index) {
  setState(() {
    _currentIndex = index;
  });
  // 你可以在这里添加导航逻辑
},

6. 完整示例

以下是一个完整的示例，展示了如何使用 ruki_nav_bar 插件创建一个自定义的底部导航栏。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Ruki Nav Bar Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ruki Nav Bar Example'),
      ),
      body: Center(
        child: Text('Selected Index: $_currentIndex'),
      ),
      bottomNavigationBar: RukiNavBar(
        items: [
          RukiNavBarItem(icon: Icons.home, title: 'Home'),
          RukiNavBarItem(icon: Icons.search, title: 'Search'),
          RukiNavBarItem(icon: Icons.person, title: 'Profile'),
        ],
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        selectedColor: Colors.blue,
        unselectedColor: Colors.grey,
        iconSize: 24.0,
        fontSize: 14.0,
        backgroundColor: Colors.white,
        elevation: 8.0,
      ),
    );
  }
}