Flutter自定义多选下拉菜单插件gzx_dropdown_menu_more_custom的使用

Flutter自定义多选下拉菜单插件gzx_dropdown_menu_more_custom的使用

功能介绍

这是一个Flutter自定义功能强大的轻量级下拉筛选菜单插件。

内置基本样式

Widget buildBody(BuildContext context) {
  return DropDrownSelectorComponent(tag: 'xxx',
    dropdownMenuBuilders: (GZXDropdownMenuController dropdownMenuController,
        dynamic Function(int, String) onHeaderChanged) {

    return [
      GZXDropdownMenuBuilder(dropDownWidget: buildList1(dropdownMenuController,onHeaderChanged,0), dropDownHeight: 200),
      GZXDropdownMenuBuilder(dropDownWidget: buildList1(dropdownMenuController,onHeaderChanged,1), dropDownHeight: 100),
      GZXDropdownMenuBuilder(dropDownWidget: buildList1(dropdownMenuController,onHeaderChanged,2), dropDownHeight: 300),
    ];
  }, dropDownHeaders: [
    "浏览器",
    "ai",
    "年纪"
  ], body: Center(
      child: Text(state.currentChoosed),
    ),);
}

待办事项

• ❌ 由于GZXDropDownMenu只能在Stack内使用，扩展性还不够强。
• ❌ 支持CustomScrollView和NestedScrollView。
• ❌ …

Gif效果图

如何使用

目前已发布到Pub，你可以在Pub官网查看最新的版本和更新说明！

1. 添加gzx_dropdown_menu package

打开pubspec.yaml文件，添加如下代码：

  gzx_dropdown_menu: ^3.1.0

添加后打开终端，执行flutter packages get

2. 使用

强烈建议你先clone下本仓库，然后运行下看下效果。打开本仓库example项目下的gzx_dropdown_menu_test_page.dart文件自己看。

没空编辑文字了，而且说这么多还不如你直接运行下看下效果，然后看下代码，就知道如何使用了。

算了，还是简单说下吧！ 你只需要将GZXDropDownHeader和GZXDropDownMenu嵌套到你的代码中即可。

GZXDropDownHeader

// 下拉菜单头部
GZXDropDownHeader(
  // 下拉的头部项，目前每一项，只能自定义显示的文字、图标、图标大小修改
  items: [
    GZXDropDownHeaderItem(_dropDownHeaderItemStrings[0]),
    GZXDropDownHeaderItem(
      _dropDownHeaderItemStrings[1],
      iconData: Icons.keyboard_arrow_down,
      iconDropDownData: Icons.keyboard_arrow_up,
    ),
    GZXDropDownHeaderItem(
      _dropDownHeaderItemStrings[2],
      style: TextStyle(color: Colors.green),
      iconData: Icons.arrow_upward,
      iconDropDownData: Icons.arrow_downward,
    ),
    GZXDropDownHeaderItem(
      _dropDownHeaderItemStrings[3],
      iconData: Icons.filter_frames,
      iconSize: 18,
    ),
  ],
  // GZXDropDownHeader对应第一父级Stack的key
  stackKey: _stackKey,
  // controller用于控制menu的显示或隐藏
  controller: _dropdownMenuController,
  // 当点击头部项的事件，在这里可以进行页面跳转或openEndDrawer
  onItemTap: (index) {
    if (index == 3) {
      _dropdownMenuController.hide();
      _scaffoldKey.currentState!.openEndDrawer();
    }
  },
  // 头部的高度
  height: 40,
  // 头部背景颜色
  color: Colors.red,
  // 头部边框宽度
  borderWidth: 1,
  // 头部边框颜色
  borderColor: Color(0xFFeeede6),
  // 分割线高度
  dividerHeight: 20,
  // 分割线颜色
  dividerColor: Color(0xFFeeede6),
  // 文字样式
  style: TextStyle(color: Color(0xFF666666), fontSize: 14),
  // 下拉时文字样式
  dropDownStyle: TextStyle(
    fontSize: 14,
    color: Theme.of(context).primaryColor,
  ),
  // 图标大小
  iconSize: 20,
  // 图标颜色
  iconColor: Color(0xFFafada7),
  // 下拉时图标颜色
  iconDropDownColor: Theme.of(context).primaryColor,
),

GZXDropDownMenu

// 下拉菜单，注意GZXDropDownMenu目前只能在Stack内，后续有时间会改进，以及支持CustomScrollView和NestedScrollView
GZXDropDownMenu(
  // controller用于控制menu的显示或隐藏
  controller: _dropdownMenuController,
  // 下拉菜单显示或隐藏动画时长
  animationMilliseconds: 300,
  // 下拉后遮罩颜色
  //maskColor: Theme.of(context).primaryColor.withOpacity(0.5),
  //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: _buildAddressWidget((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) {
          _selectDistanceSortCondition = value;
          _dropDownHeaderItemStrings[2] = _selectDistanceSortCondition.name;
          _dropdownMenuController.hide();
          setState(() {});
        })),
  ],
),