Flutter настраиваемый мощный пакет раскрывающегося меню фильтра

Flutter

gzx_dropdown_menu

Pub Package
GitHub Stars
GitHub Forks
GitHub Issues
GitHub License

A custom is strong dropdown menu for Flutter. Easy to use and powerful for customization, it's up to you what you want to display in the dropdown menu!

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

Нажмите здесь, чтобы просмотреть историю обновлений версий

Открытый исходный код — это непросто 🙀🙀🙀, пожалуйста, дайте мне звезду ⭐️! Я буду продолжать обновлять код с учетом всеобщего внимания и личного времени!

Если вы хотите получать обновления, вы можете посмотреть, а если у вас есть какие-либо вопросы, пожалуйста, укажите Проблемы.

Связанный репозиторий

Статьи по Теме

навигация

GIF-рендеринг

Это изображения Meituan и Taobao соответственно.
Код Meituan находится в каталоге примеров этого репозитория.
Код Taobao находится вFlutter Taobao, нажмите на меня, чтобы открыть

как использовать

Он был выпущен для Pub, вы можете проверить последнюю версию и инструкции по обновлению на официальном сайте Pub!Нажмите на меня, чтобы перейти на официальный сайт паба, чтобы проверить

1. Добавьте пакет gzx_dropdown_menu

Откройте файл pubspec.yaml Добавьте следующий код

  gzx_dropdown_menu : ^2.1.0

После добавления откройте Терминал и запустите пакеты флаттера.

2. Используйте

  • Настоятельно рекомендуется сначала клонировать этот репозиторий.
  • Затем запустите его, чтобы увидеть эффект
  • Откройте файл gzx_dropdown_menu_test_page.dart в примере проекта этого репозитория, чтобы убедиться в этом.

Править текст времени нет, и лучше сразу запустить, чтобы увидеть эффект, а потом посмотреть код, и вы будете знать, как им пользоваться.

не бери в голову🤪🤪🤪🙄 Давайте будем проще! ! !
Вам просто нужно вложить GZXDropDownHeader и GZXDropDownMenu в свой код.

GZXDropDownHeader

Здесь следует отметить, что эти параметры не обязательны для записи, я написал их только для того, чтобы вы знали о мощных пользовательских функциях, на самом деле первые три параметра являются обязательными.

  // 下拉菜单头部
  GZXDropDownHeader(
    // 下拉的头部项，目前每一项，只能自定义显示的文字、图标、图标大小修改
    items: [
      GZXDropDownHeaderItem(_dropDownHeaderItemStrings[0]),
      GZXDropDownHeaderItem(_dropDownHeaderItemStrings[1]),
      GZXDropDownHeaderItem(_dropDownHeaderItemStrings[2], style: TextStyle(color: Colors.green)),
      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,
    // 下拉后遮罩颜色
    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: _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(() {});
          })),
    ],
  )
Категории