Easy sidemenu 是一个易于使用的 Flutter 侧边菜单（栏），可用于应用程序中的导航。
侧边菜单通常位于页面左侧或右侧，可用于导航或其他用途。侧边菜单类似于底部导航栏，但位于屏幕侧面，通常用于较大的屏幕。
截图
| 展开 |
紧凑 |
 |
 |
| 自动 |
 |
演示
您可以在此处查看 Web 演示： https://jamalianpour.github.io/easy_sidemenu
用法
1. 将依赖项添加到您的项目 pubspec.yaml 文件中
dependencies:
easy_sidemenu: ^0.1.1+1
在您的应用程序的根目录下运行 flutter packages get。
2. 导入 easy sidemenu 库
import 'package:easy_sidemenu/easy_sidemenu.dart';
现在您可以在代码中使用 SideMenu 作为小部件。
3. 使用 SideMenu
首先，您应该定义一个将显示在 SideMenu 中的项目列表
<div class="highlight highlight-source-dart position-relative" data-snippet-clipboard-copy-content="List items = [
SideMenuItem(
// 在 SideMenu 中显示的优先级，值越低显示在顶部
priority: 0,
title: ‘仪表盘’,
onTap: () => page.jumpToPage(0),
icon: Icons.home,
),
SideMenuItem(
priority: 1,
title: ‘设置’,
onTap: () => page.jumpToPage(1),
icon: Icons.settings,
),
SideMenuItem(
priority: 2,
title: ‘退出’,
onTap: () {},
icon: Icons.exit_to_app,
),
];
“>
List<SideMenuItem> items = [
SideMenuItem(
// Priority of item to show on SideMenu, lower value is displayed at the top
priority: 0,
title: 'Dashboard',
onTap: () => page.jumpToPage(0),
icon: Icons.home,
),
SideMenuItem(
priority: 1,
title: 'Settings',
onTap: () => page.jumpToPage(1),
icon: Icons.settings,
),
SideMenuItem(
priority: 2,
title: 'Exit',
onTap: () {},
icon: Icons.exit_to_app,
),
];
优先级规则
之后，您需要将主页面包裹在 row 中，然后将 SideMenu 添加为该行的第一个子项，如下所示
PageController page = PageController();
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SideMenu(
// page controller to manage a PageView
controller: page,
// will shows on top of all items, it can be a logo or a Title text
title: Image.asset('assets/images/easy_sidemenu.png'),
// will show on bottom of SideMenu when displayMode was SideMenuDisplayMode.open
footer: Text('demo'),
// List of SideMenuItem to show them on SideMenu
items: items,
),
Expanded(
child: PageView(
controller: page,
children: [
Container(
child: Center(
child: Text('Dashboard'),
),
),
Container(
child: Center(
child: Text('Settings'),
),
),
],
),
),
],
),
样式
您可以使用 SideMenuStyle 更改侧边菜单的样式
style: SideMenuStyle(
displayMode: SideMenuDisplayMode.auto,
openSideMenuWidth: 200,
compactSideMenuWidth: 40,
hoverColor: Colors.blue[100],
selectedColor: Colors.lightBlue,
selectedIconColor: Colors.white,
unselectedIconColor: Colors.black54,
backgroundColor: Colors.grey
selectedTitleTextStyle: TextStyle(color: Colors.white),
unselectedTitleTextStyle: TextStyle(color: Colors.black54),
iconSize: 20,
),
样式属性
| props |
types |
描述 |
| displayMode |
SideMenuDisplayMode? |
SideMenuDisplayMode.auto, SideMenuDisplayMode.open, SideMenuDisplayMode.compact |
| openSideMenuWidth |
double? |
当 displayMode 为 SideMenuDisplayMode.open 时 SideMenu 的宽度 |
| compactSideMenuWidth |
double? |
当 displayMode 为 SideMenuDisplayMode.compact 时 SideMenu 的宽度 |
| hoverColor |
Color? |
当鼠标悬停在 SideMenuItem 时该项目的颜色 |
| selectedColor |
Color? |
当项目被选中时 SideMenuItem 的背景颜色 |
| selectedIconColor |
Color? |
项目被选中时图标的颜色 |
| unselectedIconColor |
Color? |
项目未被选中时图标的颜色 |
| backgroundColor |
Color? |
SideMenu 的背景颜色 |
| selectedTitleTextStyle |
TextStyle? |
项目被选中时 title 文本的样式 |
| unselectedTitleTextStyle |
TextStyle? |
项目未被选中时 title 文本的样式 |
| iconSize |
double? |
SideMenuItem 上图标的大小 |
欢迎 fork 此仓库并发送 pull request
?
?
GitHub
https://github.com/Jamalianpour/easy_sidemenu
