side_nav 是一个用于 Flutter 的侧边导航插件，可以帮助你轻松地在应用中添加侧边导航栏。以下是如何使用 side_nav 插件的详细步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 side_nav 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  side_nav: ^0.0.1 # 请使用最新版本

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

2. 导入包

在你的 Dart 文件中导入 side_nav：

import 'package:side_nav/side_nav.dart';

3. 使用 SideNav 组件

SideNav 是一个可以自定义的侧边导航栏组件。你可以通过传递参数来定制它的外观和行为。

以下是一个简单的使用示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SideNav Example'),
        ),
        body: Row(
          children: [
            SideNav(
              items: [
                SideNavItem(
                  icon: Icons.home,
                  label: 'Home',
                  onTap: () {
                    print('Home tapped');
                  },
                ),
                SideNavItem(
                  icon: Icons.settings,
                  label: 'Settings',
                  onTap: () {
                    print('Settings tapped');
                  },
                ),
                SideNavItem(
                  icon: Icons.person,
                  label: 'Profile',
                  onTap: () {
                    print('Profile tapped');
                  },
                ),
              ],
              selectedIndex: 0,
            ),
            Expanded(
              child: Center(
                child: Text('Main Content'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

4. 自定义 SideNav

SideNav 提供了多个参数，允许你自定义导航栏的外观和行为。以下是一些常用的参数：

• items: 导航项列表，每个导航项都是一个 SideNavItem。
• selectedIndex: 当前选中的导航项索引。
• backgroundColor: 导航栏的背景颜色。
• selectedColor: 选中项的颜色。
• unselectedColor: 未选中项的颜色。
• iconSize: 图标的大小。
• itemSpacing: 导航项之间的间距。
• onItemSelected: 当导航项被选中时的回调函数。

5. 处理导航项点击事件

你可以在 SideNavItem 的 onTap 回调中处理导航项的点击事件。例如：

SideNavItem(
  icon: Icons.home,
  label: 'Home',
  onTap: () {
    // 处理点击事件
    print('Home tapped');
  },
),

6. 动态更新选中项

你可以通过 setState 动态更新 selectedIndex 来改变选中的导航项：

int _selectedIndex = 0;

void _onItemTapped(int index) {
  setState(() {
    _selectedIndex = index;
  });
}

SideNav(
  items: [
    SideNavItem(
      icon: Icons.home,
      label: 'Home',
      onTap: () {
        _onItemTapped(0);
      },
    ),
    SideNavItem(
      icon: Icons.settings,
      label: 'Settings',
      onTap: () {
        _onItemTapped(1);
      },
    ),
  ],
  selectedIndex: _selectedIndex,
),

7. 完整示例

以下是一个完整的示例，展示了如何使用 side_nav 插件：

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

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

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

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

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SideNav Example'),
      ),
      body: Row(
        children: [
          SideNav(
            items: [
              SideNavItem(
                icon: Icons.home,
                label: 'Home',
                onTap: () {
                  _onItemTapped(0);
                },
              ),
              SideNavItem(
                icon: Icons.settings,
                label: 'Settings',
                onTap: () {
                  _onItemTapped(1);
                },
              ),
              SideNavItem(
                icon: Icons.person,
                label: 'Profile',
                onTap: () {
                  _onItemTapped(2);
                },
              ),
            ],
            selectedIndex: _selectedIndex,
          ),
          Expanded(
            child: Center(
              child: Text('Page ${_selectedIndex + 1}'),
            ),
          ),
        ],
      ),
    );
  }
}