介绍

这是一个自定义的Flutter下拉菜单，可以显示标题选中状态和多种下拉动画效果。

特征

• 支持自定义header
• 支持自定义menus
• 支持多种动画效果
• 内置选中效果header

效果预览

开始使用

安装

将 flutter_drop_menu 包添加到你的 pubspec 依赖项中

DropDownMenu 参数

属性	类型	描述	是否必传
header	List	显示在标题中的自定义小部件	是
menus	List	菜单中显示的自定义小部件	是
controller	DropdownController	用于控制菜单的控制器	是
divider	Widget?	将标题与菜单分隔开的小部件	否
tag	String	菜单的标签	否
animType	AnimationType	菜单动画类型，默认使用AnimationType.topToBottom	否
animTypes	List?	菜单动画类型集合，可以指定每个菜单进行不同的动画	否
outsideOnTap	GestureTapCallback?	外部点击区域回调	否
headerHeight	double	标题小部件的高度	否
headerBackgroundColor	Color	标题小部件的背景颜色	否
headerMainAxisAlignment	MainAxisAlignment	标题小部件在主轴上的排列方式	否
slideDx	double	使用[AnimationType.rightToLeft]动画类型时滑动菜单占用的空间量	否
padding	EdgeInsetsGeometry	菜单上下左右的填充量	否
curve	Curve	菜单的动画曲线	否
duration	Duration	菜单动画的持续时间	否
outsideColor	Color	菜单外部区域的背景颜色	否

使用示例

  /// The controller to use to control the menu.
  final DropdownController _controller = DropdownController();

  /// Show the menu.
  void _showMenu(int index) {
    if (_controller.index == index && _controller.isShow) {
      _hideMenu();
    } else {
      _controller.show(index);
    }
  }

  /// Hide the menu.
  void _hideMenu() {
    _controller.hide();
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          DropDownMenu(
            // The controller to use to control the menu.
            controller: _controller,
            // The header of the drop-down menu.
            header: List.generate(4, (index) {
                return DropDownHeader(
                  index: index,
                  title: 'Header $index',
                  onTap: (index) {
                    _showMenu(index);
                  },
                );
              },
            ),
            // The menu of the drop-down menu.
            menus: List.generate(4, (index) {
                return Container(
                  width: double.infinity,
                  height: 200,
                  color: Colors.white,
                  alignment: Alignment.center,
                  child: InkWell(
                    onTap: () {
                      _hideMenu();
                    },
                    child: Text('Menu $index'),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }