Flutter 自定義功能強大的下拉篩選菜單 package

自定義功能強大的下拉篩選菜單flutter package

• Custom dropdown header

• Custom dropdown header item

• Custom dropdown menu

• Custom dropdown menu show animation time

• Control dropdown menu show or hide

如果對您有幫助，麻煩點個關注，您的支持是我持續更新的動力。

導航

• GIF效果圖

• 如何使用

Gif效果圖

分別是仿美團和淘寶的效果圖
美團的代碼就在這個倉庫的example目錄下

image

如何使用

由于最近被qiang，所以沒有發布到Pub，后續會發布到Pub

1、添加gzx_dropdown_menu package

打開pubspec.yaml文件
添加如下代碼

??gzx_dropdown_menu?:
????git:
??????url:?https://github.com/GanZhiXiong/gzx_dropdown_menu.git

添加位置如下圖所示

添加后打開Terminal，執行flutter packages get

2、使用

打開本倉庫example項目下的gzx_dropdown_menu_test_page.dart文件自己看。

沒空編輯文字了，而且說這么多還不如你直接運行下看下效果，然后看下代碼，就知道如何使用了。

算了還是簡單說下吧！！！ ?
你只需要將GZXDropDownHeader和GZXDropDownMenu嵌套到你的代碼中即可

GZXDropDownHeader

??//?下拉菜單頭部
??GZXDropDownHeader(????//?下拉的頭部項，目前每一項，只能自定義顯示的文字、圖標、圖標大小修改
????items:?[
??????GZXDropDownHeaderItem(_dropDownHeaderItemStrings[0]),
??????GZXDropDownHeaderItem(_dropDownHeaderItemStrings[1]),
??????GZXDropDownHeaderItem(_dropDownHeaderItemStrings[2]),
??????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

??//?下拉菜單
??GZXDropDownMenu(????//?controller用于控制menu的顯示或隱藏
????controller:?_dropdownMenuController,????//?下拉菜單顯示或隱藏動畫時長
????animationMilliseconds:?500,????//?下拉菜單，高度自定義，你想顯示什么就顯示什么，完全由你決定，你只需要在選擇后調用_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(()?{});
??????????})),
????],
??)