# side_menu

**Repository Path**: coderxslee/side_menu

## Basic Information

- **Project Name**: side_menu
- **Description**: No description available
- **Primary Language**: Dart
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-03-05
- **Last Updated**: 2025-03-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Side Menu

一个功能强大、可定制的Flutter侧边栏菜单组件，适用于后台管理系统、控制面板等应用场景。

## 功能特点

- 支持多级嵌套菜单结构（最多三级）
- 可折叠/展开的交互设计
- 完全可自定义的样式和主题
- 支持悬停效果和选中状态
- 响应式设计，适应不同屏幕尺寸
- 简单易用的API接口

## 预览

![示例](example/iShot_2025-03-05_11.12.21.gif)
![示例](example/iShot_2025-03-05_10.26.47.gif)

## 安装

在您的`pubspec.yaml`文件中添加依赖：

```yaml
dependencies:
  side_menu: ^0.0.1
```

或者使用Git仓库：

```yaml
dependencies:
  side_menu:
    git:
      url: https://gitee.com/coderxsle/side_menu.git
```

## 使用方法

### 基本用法

```dart
import 'package:flutter/material.dart';
import 'package:side_menu/side_menu.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SideMenu(
          title: '管理控制台',
          menuItems: items,
        ),
      ),
    );
  }

  List<MenuItemModel> items() {
    return [
      item('仪表盘', 'dashboard', Icons.dashboard, '/dashboard'),
      item('管理控制台', 'user_management', Icons.people, '/users/list', children: [
        item('用户角色', 'user_roles', Icons.security, '/users/roles/admin'),
        item('客户角色', 'customer_roles', Icons.person, '/users/roles/customer'),
        item('员工角色', 'staff_roles', Icons.badge, '/users/roles/staff'),
        item('权限设置', 'user_permissions', Icons.lock, '/users/permissions', children: [
          item('用户权限', 'user_permissions', Icons.lock, '/users/permissions/user'),
          item('角色权限', 'role_permissions', Icons.lock, '/users/permissions/role'),
        ]),
      ]),
    ];
  }
}
```

### 使用控制器

```dart
final menuController = SideMenuController(
  menuItems: yourMenuItems,
  onStateChanged: () {
    // 处理菜单状态变化
    print('Selected menu ID: ${menuController.selectedMenuId}');
  },
);

// 然后在SideMenu中使用
SideMenu(
  menuItems: yourMenuItems,
  controller: menuController,
)

// 手动控制选中项
menuController.selectMenuItem('dashboard');

// 展开/折叠菜单
menuController.toggleMenu();
```

### 自定义样式

```dart
SideMenu(
  menuItems: yourMenuItems,
  width: 250,                                     // 菜单宽度
  backgroundColor: const Color(0xFF2A3F54),       // 背景色
  selectedColor: const Color(0xFF1ABB9C),         // 选中背景色
  hoverColor: const Color(0xFF374A5E),            // 悬停背景色
  textColor: Colors.white70,                      // 文本颜色
  selectedTextColor: Colors.white,                // 选中文本颜色
  collapsedWidth: 60,                             // 折叠后宽度
)
```

## 配置选项

| 参数 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| menuItems | List<MenuItemModel> | 必填 | 菜单项列表 |
| title | String | 空字符串 | 菜单标题 |
| width | double | 250 | 菜单展开时的宽度 |
| backgroundColor | Color | Color(0xFF2A3F54) | 菜单背景色 |
| selectedColor | Color | Color(0xFF1ABB9C) | 选中项背景色 |
| hoverColor | Color | Color(0xFF374A5E) | 悬停项背景色 |
| textColor | Color | Colors.white70 | 文本颜色 |
| selectedTextColor | Color | Colors.white | 选中项文本颜色 |
| collapsedWidth | double | 60 | 菜单折叠时的宽度 |
| controller | SideMenuController | null | 菜单控制器 |

## 菜单项配置

`MenuItemModel` 用于定义菜单项结构：

```dart
MenuItemModel({
  required String id,           // 唯一标识
  required String title,        // 菜单标题
  required IconData icon,       // 菜单图标
  List<MenuItemModel> children = const [], // 子菜单项
  String? route,                // 关联路由
})
```

## 示例项目

查看 [example](https://gitee.com/coderxsle/side_menu/tree/master/example) 目录获取完整的示例应用代码。

## 许可证

本项目遵循 MIT 许可证