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

gzx_dropdown_menu

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

• Custom dropdown header
• Custom dropdown header item
• Custom dropdown menu
• Custom dropdown menu show animation time
• Control dropdown menu show or hide

若是對您有幫助，麻煩給個Star，您的支持是我持續更新的動力。

導航

• Gif效果圖
• 如何使用

Gif效果圖

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

如何使用

因爲最近被qiang，因此沒有發佈到Pub，後續會發布到Pub

一、添加gzx_dropdown_menu package

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

gzx_dropdown_menu :
    git:
      url: https://github.com/GanZhiXiong/gzx_dropdown_menu.git
複製代碼

添加位置以下圖所示

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

二、使用

打開本倉庫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(() {});
          })),
    ],
  )
複製代碼