Flutter 自定義功能強(qiáng)大的下拉篩選菜單 package

自定義功能強(qiáng)大的下拉篩選菜單flutter package

• Custom dropdown header

• Custom dropdown header item

• Custom dropdown menu

• Custom dropdown menu show animation time

• Control dropdown menu show or hide

如果對您有幫助，麻煩點(diǎn)個關(guān)注，您的支持是我持續(xù)更新的動力。

導(dǎo)航

• GIF效果圖

• 如何使用

Gif效果圖

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

image

如何使用

由于最近被qiang，所以沒有發(fā)布到Pub，后續(xù)會發(fā)布到Pub

1、添加gzx_dropdown_menu package

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

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

添加位置如下圖所示

添加后打開Terminal，執(zhí)行flutter packages get

2、使用

打開本倉庫example項(xiàng)目下的gzx_dropdown_menu_test_page.dart文件自己看。

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

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

GZXDropDownHeader

??//?下拉菜單頭部
??GZXDropDownHeader(????//?下拉的頭部項(xiàng)，目前每一項(xiàng)，只能自定義顯示的文字、圖標(biāo)、圖標(biāo)大小修改
????items:?[
??????GZXDropDownHeaderItem(_dropDownHeaderItemStrings[0]),
??????GZXDropDownHeaderItem(_dropDownHeaderItemStrings[1]),
??????GZXDropDownHeaderItem(_dropDownHeaderItemStrings[2]),
??????GZXDropDownHeaderItem(_dropDownHeaderItemStrings[3],?iconData:?Icons.filter_frames,?iconSize:?18),
????],????//?GZXDropDownHeader對應(yīng)第一父級Stack的key
????stackKey:?_stackKey,????//?controller用于控制menu的顯示或隱藏
????controller:?_dropdownMenuController,????//?當(dāng)點(diǎn)擊頭部項(xiàng)的事件，在這里可以進(jìn)行頁面跳轉(zhuǎn)或openEndDrawer
????onItemTap:?(index)?{??????if?(index?==?3)?{
????????_scaffoldKey.currentState.openEndDrawer();
????????_dropdownMenuController.hide();
??????}
????},????//?頭部的高度
????height:?40,????//?頭部背景顏色
????color:?Colors.red,????//?頭部邊框?qū)挾?????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,
????),????//?圖標(biāo)大小
????iconSize:?20,????//?圖標(biāo)顏色
????iconColor:?Color(0xFFafada7),????//?下拉時圖標(biāo)顏色
????iconDropDownColor:?Theme.of(context).primaryColor,
??),

GZXDropDownMenu

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