# gzx_dropdown_menu
**Repository Path**: exa007/gzx_dropdown_menu
## Basic Information
- **Project Name**: gzx_dropdown_menu
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-18
- **Last Updated**: 2021-08-13
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# gzx_dropdown_menu
[](https://pub.dev/packages/gzx_dropdown_menu)
[](https://github.com/ganzhixiong/gzx_dropdown_menu/stargazers)
[](https://github.com/ganzhixiong/gzx_dropdown_menu/network)
[](https://github.com/ganzhixiong/gzx_dropdown_menu/issues)
[](https://raw.githubusercontent.com/ganzhixiong/gzx_dropdown_menu/master/LICENSE)
A custom is strong dropdown menu for Flutter. Easy to use and powerful for customization, it's up to you what you want to display in the dropdown menu!
* Custom dropdown header
* Custom dropdown header item
* Custom dropdown menu
* Custom dropdown menu animation
* Control dropdown menu show or hide
**[点我查看版本更新记录](https://pub.flutter-io.cn/packages/gzx_dropdown_menu#-changelog-tab-)**
## 开源不易🙀🙀🙀，麻烦给个Star⭐️吧！我会根据大家的关注度和个人时间持续更新代码！
**如你想接收更新消息，你可以Watch下，有问题请提到Issues。**
#### 相关Repository
* [Flutter 淘宝App](https://github.com/GanZhiXiong/GZXTaoBaoAppFlutter)
#### 相关文章
* [掘金](https://juejin.im/user/5cf10106518825189f6fa229/posts)
## 导航
- [Gif效果图](#Gif效果图)
- [如何使用](#如何使用)
## Gif效果图
分别是仿美团和淘宝的效果图
美团的代码就在这个仓库的example目录下
淘宝的代码在[Flutter 淘宝，点我打开](https://github.com/GanZhiXiong/GZXTaoBaoAppFlutter)
[//]: # (
)
## 如何使用
目前已发布到Pub，你可以在Pub官网查看最新的版本和更新说明！[点我去Pub官网查看](https://pub.flutter-io.cn/packages/gzx_dropdown_menu)
### 1、添加gzx_dropdown_menu package
打开pubspec.yaml文件
添加如下代码
``` dart
gzx_dropdown_menu : ^2.1.0
```
添加后打开Terminal，执行flutter packages get
### 2、使用
- **强烈建议你先clone下本仓库**
- 然后运行下看下效果
- 打开本仓库example项目下的gzx_dropdown_menu_test_page.dart文件自己看。
没空编辑文字了，而且说这么多还不如你直接运行下看下效果，然后看下代码，就知道如何使用了。
**~~算了~~🤪🤪🤪🙄还是简单说下吧！！！**
你只需要将GZXDropDownHeader和GZXDropDownMenu嵌套到你的代码中即可
#### GZXDropDownHeader
**这里要注意了，这些参数不是必须要要写的，我写出来只是让你知道强大的自定义功能，实际上就前面三个参数是必填的**
``` dart
// 下拉菜单头部
GZXDropDownHeader(
// 下拉的头部项，目前每一项，只能自定义显示的文字、图标、图标大小修改
items: [
GZXDropDownHeaderItem(_dropDownHeaderItemStrings[0]),
GZXDropDownHeaderItem(_dropDownHeaderItemStrings[1]),
GZXDropDownHeaderItem(_dropDownHeaderItemStrings[2], style: TextStyle(color: Colors.green)),
GZXDropDownHeaderItem(_dropDownHeaderItemStrings[3], iconData: Icons.filter_frames, iconSize: 18),
],
// GZXDropDownHeader对应第一父级Stack的key
stackKey: _stackKey,
// controller用于控制menu的显示或隐藏
controller: _dropdownMenuController,
// 当点击头部项的事件，在这里可以进行页面跳转或openEndDrawer
onItemTap: (index) {
if (index == 3) {
_scaffoldKey.currentState.openEndDrawer();
_dropdownMenuController.hide();
}
},
// 头部的高度
height: 40,
// 头部背景颜色
color: Colors.red,
// 头部边框宽度
borderWidth: 1,
// 头部边框颜色
borderColor: Color(0xFFeeede6),
// 分割线高度
dividerHeight: 20,
// 分割线颜色
dividerColor: Color(0xFFeeede6),
// 文字样式
style: TextStyle(color: Color(0xFF666666), fontSize: 13),
// 下拉时文字样式
dropDownStyle: TextStyle(
fontSize: 13,
color: Theme.of(context).primaryColor,
),
// 图标大小
iconSize: 20,
// 图标颜色
iconColor: Color(0xFFafada7),
// 下拉时图标颜色
iconDropDownColor: Theme.of(context).primaryColor,
),
```
#### GZXDropDownMenu
``` dart
// 下拉菜单
GZXDropDownMenu(
// controller用于控制menu的显示或隐藏
controller: _dropdownMenuController,
// 下拉菜单显示或隐藏动画时长
animationMilliseconds: 500,
// 下拉后遮罩颜色
maskColor: Colors.red.withOpacity(0.5),
dropdownMenuChanging: (isShow, index) {
setState(() {
_dropdownMenuChange = '(正在${isShow ? '显示' : '隐藏'}$index)';
print(_dropdownMenuChange);
});
},
dropdownMenuChanged: (isShow, index) {
setState(() {
_dropdownMenuChange = '(已经${isShow ? '显示' : '隐藏'}$index)';
print(_dropdownMenuChange);
});
},
// 下拉菜单，高度自定义，你想显示什么就显示什么，完全由你决定，你只需要在选择后调用_dropdownMenuController.hide();即可
menus: [
GZXDropdownMenuBuilder(
dropDownHeight: 40 * 8.0,
dropDownWidget: _buildQuanChengWidget((selectValue) {
_dropDownHeaderItemStrings[0] = selectValue;
_dropdownMenuController.hide();
setState(() {});
})),
GZXDropdownMenuBuilder(
dropDownHeight: 40 * 8.0,
dropDownWidget: _buildConditionListWidget(_brandSortConditions, (value) {
_selectBrandSortCondition = value;
_dropDownHeaderItemStrings[1] =
_selectBrandSortCondition.name == '全部' ? '品牌' : _selectBrandSortCondition.name;
_dropdownMenuController.hide();
setState(() {});
})),
GZXDropdownMenuBuilder(
dropDownHeight: 40.0 * _distanceSortConditions.length,
dropDownWidget: _buildConditionListWidget(_distanceSortConditions, (value) {
_dropDownHeaderItemStrings[2] = _selectDistanceSortCondition.name;
_selectDistanceSortCondition = value;
_dropdownMenuController.hide();
setState(() {});
})),
],
)
```