Flutter下拉菜单插件gzx_dropdown_menu的使用

简介

gzx_dropdown_menu 是一个为Flutter设计的自定义功能强大的轻量级下拉筛选菜单包。它支持iOS和Android平台，具有高度可定制性，可以轻松集成到您的项目中。

功能介绍

• 自定义下拉菜单头部
• 自定义下拉菜单项
• 自定义下拉菜单动画
• 控制下拉菜单显示或隐藏

如何使用

1. 添加 gzx_dropdown_menu package

在 pubspec.yaml 文件中添加如下依赖：

dependencies:
  gzx_dropdown_menu: ^3.1.0

然后在终端执行 flutter packages get 命令来安装依赖。

2. 使用 GZXDropDownHeader 和 GZXDropDownMenu

GZXDropDownHeader

这是下拉菜单的头部组件，你可以自定义头部项的文字、图标等属性。以下是一个简单的例子：

GZXDropDownHeader(
  items: [
    GZXDropDownHeaderItem("分类"),
    GZXDropDownHeaderItem("品牌", iconData: Icons.keyboard_arrow_down),
    GZXDropDownHeaderItem("距离", style: TextStyle(color: Colors.green)),
    GZXDropDownHeaderItem("更多", iconData: Icons.filter_frames, iconSize: 18),
  ],
  stackKey: _stackKey,
  controller: _dropdownMenuController,
  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 中。以下是一个完整的示例代码：

import 'package:flutter/material.dart';
import 'package:gzx_dropdown_menu/gzx_dropdown_menu.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: GZXDropDownMenuTestPage(),
    );
  }
}

class GZXDropDownMenuTestPage extends StatefulWidget {
  @override
  _GZXDropDownMenuTestPageState createState() => _GZXDropDownMenuTestPageState();
}

class _GZXDropDownMenuTestPageState extends State<GZXDropDownMenuTestPage> {
  GlobalKey<DropdownMenuState> _stackKey = GlobalKey();
  GZXDropdownMenuController _dropdownMenuController = GZXDropdownMenuController();

  List<String> _dropDownHeaderItemStrings = ["分类", "品牌", "距离", "更多"];
  String _dropdownMenuChange = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter Demo')),
      body: Stack(
        key: _stackKey,
        children: <Widget>[
          // 页面内容
          Container(
            color: Colors.white,
            child: Center(
              child: Text('页面内容'),
            ),
          ),
          // 下拉菜单头部
          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,
              ),
            ],
            stackKey: _stackKey,
            controller: _dropdownMenuController,
            onItemTap: (index) {
              if (index == 3) {
                _dropdownMenuController.hide();
                Scaffold.of(context).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(
            controller: _dropdownMenuController,
            animationMilliseconds: 300,
            dropdownMenuChanging: (isShow, index) {
              setState(() {
                _dropdownMenuChange = '(正在${isShow ? '显示' : '隐藏'}$index)';
                print(_dropdownMenuChange);
              });
            },
            dropdownMenuChanged: (isShow, index) {
              setState(() {
                _dropdownMenuChange = '(已经${isShow ? '显示' : '隐藏'}$index)';
                print(_dropdownMenuChange);
              });
            },
            menus: [
              GZXDropdownMenuBuilder(
                  dropDownHeight: 40 * 8.0,
                  dropDownWidget: ListView.builder(
                    itemCount: 10,
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Text('选项 ${index + 1}'),
                        onTap: () {
                          _dropDownHeaderItemStrings[0] = '选项 ${index + 1}';
                          _dropdownMenuController.hide();
                          setState(() {});
                        },
                      );
                    },
                  )),
              GZXDropdownMenuBuilder(
                  dropDownHeight: 40 * 8.0,
                  dropDownWidget: ListView.builder(
                    itemCount: 5,
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Text('品牌 ${index + 1}'),
                        onTap: () {
                          _dropDownHeaderItemStrings[1] = '品牌 ${index + 1}';
                          _dropdownMenuController.hide();
                          setState(() {});
                        },
                      );
                    },
                  )),
              GZXDropdownMenuBuilder(
                  dropDownHeight: 40 * 5.0,
                  dropDownWidget: ListView.builder(
                    itemCount: 5,
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Text('距离 ${index + 1}'),
                        onTap: () {
                          _dropDownHeaderItemStrings[2] = '距离 ${index + 1}';
                          _dropdownMenuController.hide();
                          setState(() {});
                        },
                      );
                    },
                  )),
            ],
          ),
        ],
      ),
    );
  }
}

相关链接

• Flutter 淘宝App
• 作者CSDN

通过上述步骤，您可以轻松地将 gzx_dropdown_menu 集成到您的Flutter项目中，并根据需要进行自定义。希望这对您有所帮助！