Flutter3.7新增Menu菜单组件的使用教程分享

  const MenuAnchor({
    super.key,
    this.controller,// 控制器
    this.childFocusNode,//如果菜单是输入框，焦点控制
    this.style, //菜单样式
    this.alignmentOffset = Offset.zero,//相对于组件左下角位置
    this.clipBehavior = Clip.none,// 超出屏幕剪切 不常用
    this.anchorTapClosesMenu = false,// 设置为true时，菜单打开时，点击会重复打开。
    this.onOpen,//打开回调
    this.onClose,//关闭回调
    this.crossAxisUnconstrained = true,
    required this.menuChildren,//下拉菜单列表
    this.builder,//组件本身，通常是控制菜单的按钮
    this.child,//传递给上方builder里的child组件
  });

  const SubmenuButton({
    super.key,
    this.onHover,//按钮是否选中回调 在pc端属于鼠标指针在此菜单上
    this.onFocusChange,//是否获取焦点回调
    this.onOpen,//打开下级菜单回调
    this.onClose,//关闭下级菜单回调
    this.style,//按钮本身样式
    this.menuStyle,//下级菜单样式
    this.alignmentOffset,//相对位置偏移量 默认和组件上边对齐
    this.clipBehavior = Clip.none,
    this.focusNode,
    this.statesController,//组件状态扩展
    this.leadingIcon,//左边可选图标
    this.trailingIcon,//右边可选图标
    required this.menuChildren,//联级菜单
    required this.child,//组件本身
  });

  const MenuItemButton({
    super.key,
    this.onPressed,//点击事件
    this.onHover,//选中回调
    this.requestFocusOnHover = true,//指针悬停是否聚焦
    this.onFocusChange,//是否获取焦点回调
    this.focusNode,//焦点控制
    this.shortcut,//快捷键设置
    this.style,//本身样式
    this.statesController,//组件状态扩展
    this.clipBehavior = Clip.none,
    this.leadingIcon,//...
    this.trailingIcon,//...
    required this.child,//...
  });

 const MenuBar({
    super.key,
    this.style,// 菜单样式
    this.clipBehavior = Clip.none,
    this.controller,
    required this.children,
  });

import 'package:flutter/material.dart';
void main() => runApp(const MenuApp());
enum MenuEntry {
  about('About'),
  showMessage('Show Message'),
  hideMessage('Hide Message'),
  colorMenu('Color Menu'),
  colorRed('Red Background'),
  colorGreen('Green Background'),
  colorBlue('Blue Background');

  final String label;
  const MenuEntry(this.label);
}

class MyCascadingMenu extends StatefulWidget {
  const MyCascadingMenu({super.key, required this.message});

  final String message;

  @override
  State<MyCascadingMenu> createState() => _MyCascadingMenuState();
}

class _MyCascadingMenuState extends State<MyCascadingMenu> {
  MenuEntry? _lastSelection;
  final FocusNode _buttonFocusNode = FocusNode(debugLabel: 'Menu Button');

  Color get backgroundColor => _backgroundColor;
  Color _backgroundColor = Colors.red;
  set backgroundColor(Color value) {
    if (_backgroundColor != value) {
      setState(() {
        _backgroundColor = value;
      });
    }
  }

  bool get showingMessage => _showingMessage;
  bool _showingMessage = false;
  set showingMessage(bool value) {
    if (_showingMessage != value) {
      setState(() {
        _showingMessage = value;
      });
    }
  }

  @override
  void dispose() {
    _buttonFocusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        MenuBar(
            style: MenuStyle(
                backgroundColor:
                    MaterialStateColor.resolveWith((states) => Colors.white),),
            children: [
              SubmenuButton(menuChildren: _meunList(), child: const Text("菜单1")),
              SubmenuButton(menuChildren: _meunList(), child: const Text("菜单2")),
              SubmenuButton(menuChildren: _meunList(), child: const Text("菜单3")),
               MenuAnchor(
          childFocusNode: _buttonFocusNode,
          menuChildren: _meunList(),
          builder:
              (BuildContext context, MenuController controller, Widget? child) {
            return TextButton(
              focusNode: _buttonFocusNode,
              onPressed: () {
                if (controller.isOpen) {
                  controller.close();
                } else {
                  controller.open();
                }
              },
              child: const Text('OPEN MENU'),
            );
          },
        ),
            ]),
       
        Expanded(
          child: Container(
            alignment: Alignment.center,
            color: backgroundColor,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(12.0),
                  child: Text(
                    showingMessage ? widget.message : '',
                    style: Theme.of(context).textTheme.headlineSmall,
                  ),
                ),
                Text(_lastSelection != null
                    ? 'Last Selected: ${_lastSelection!.label}'
                    : ''),
              ],
            ),
          ),
        ),
      ],
    );
  }

  void _activate(MenuEntry selection) {
    setState(() {
      _lastSelection = selection;
    });

    switch (selection) {
      case MenuEntry.about:
        showAboutDialog(
          context: context,
          applicationName: 'MenuBar Sample',
          applicationVersion: '1.0.0',
        );
        break;
      case MenuEntry.hideMessage:
      case MenuEntry.showMessage:
        showingMessage = !showingMessage;
        break;
      case MenuEntry.colorMenu:
        break;
      case MenuEntry.colorRed:
        backgroundColor = Colors.red;
        break;
      case MenuEntry.colorGreen:
        backgroundColor = Colors.green;
        break;
      case MenuEntry.colorBlue:
        backgroundColor = Colors.blue;
        break;
    }
  }

  List<Widget> _meunList() {
    return <Widget>[
      MenuItemButton(
        child: Text(MenuEntry.about.label),
        onPressed: () => _activate(MenuEntry.about),
      ),
      if (_showingMessage)
        MenuItemButton(
          onPressed: () => _activate(MenuEntry.hideMessage),
          child: Text(MenuEntry.hideMessage.label),
        ),
      if (!_showingMessage)
        MenuItemButton(
          onPressed: () => _activate(MenuEntry.showMessage),
          child: Text(MenuEntry.showMessage.label),
        ),
      SubmenuButton(
        leadingIcon: const Icon(Icons.ac_unit_sharp),
        menuChildren: <Widget>[
          MenuItemButton(
            onPressed: () => _activate(MenuEntry.colorRed),
            child: Text(MenuEntry.colorRed.label),
          ),
          MenuItemButton(
            onPressed: () => _activate(MenuEntry.colorGreen),
            child: Text(MenuEntry.colorGreen.label),
          ),
          MenuItemButton(
            onPressed: () => _activate(MenuEntry.colorBlue),
            child: Text(MenuEntry.colorBlue.label),
          ),
        ],
        child: const Text('Background Color'),
      ),
    ];
  }
}

class MenuApp extends StatelessWidget {
  const MenuApp({super.key});

  static const String kMessage = '"Talk less. Smile more." - A. Burr';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(body: MyCascadingMenu(message: kMessage)),
    );
  }
}

const MenuStyle({
    this.backgroundColor,
    this.shadowColor,
    this.surfaceTintColor,
    this.elevation,
    this.padding,
    this.minimumSize,
    this.fixedSize,
    this.maximumSize,
    this.side,
    this.shape,
    this.mouseCursor,
    this.visualDensity,
    this.alignment,
  });