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

GanZhiXiong發表於2019-06-03
FlutterPackage

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效果圖

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

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

如何使用

由於最近被qiang，所以沒有釋出到Pub，後續會發布到Pub

1、新增gzx_dropdown_menu package

開啟pubspec.yaml檔案 新增如下程式碼

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

新增位置如下圖所示

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

新增後開啟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(() {});
          })),
    ],
  )
複製程式碼

相關文章