Flutter如何添加弹出菜单-popup_menu

1

  popup_menu: ^2.0.0

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import 'package:custom_pop_up_menu/custom_pop_up_menu.dart';
List<ItemModel> menuItems = [
  ItemModel('复制', Icons.content_copy),
  ItemModel('粘贴', Icons.content_paste),
  ItemModel('转发', Icons.send),
  ItemModel('收藏', Icons.collections),
  ItemModel('删除', Icons.delete),
  ItemModel('分享', Icons.share),
  ItemModel('搜索', Icons.search),
];

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

   void _showPopupMenu(BuildContext context) {
    
      List<MenuItem> popupMenuItems = menuItems.map((item) {
        return MenuItem(
            title: item.title,
            image: Icon(
              item.icon,
              size: 20,
              color: Colors.white,
            ),
            textStyle: const TextStyle(color: Colors.white, fontSize: 12));
      }).toList();
    
      final popupMenu = PopupMenu(
        items: popupMenuItems,
        onClickMenu: (MenuItemProvider item) {
          debugPrint('Selected:${item.menuTitle}');
        },
        onDismiss: () {
          debugPrint('Menu is dismissed');
        },
        context: context,
      );
      popupMenu.show(widgetKey: btnKey);
    }

1

final GlobalKey btnKey = GlobalKey();

1
2
3
4
5

   ElevatedButton(
        key: btnKey,
        onPressed: () => _showPopupMenu(context),
        child: const Text('显示popup_menu')
  )

1
2
3
4
5

flutter: Selected:粘贴
flutter: Menu is dismissed
flutter: Selected:转发
flutter: Menu is dismissed

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

  const MenuConfig({
    this.type = MenuType.grid,
    this.itemWidth = 72.0,
    this.itemHeight = 65.0,
    this.arrowHeight = 10.0,
    this.maxColumn = 4,
    this.backgroundColor = const Color(0xff232323),
    this.highlightColor = const Color(0xff353535),
    this.lineColor = const Color(0x55000000),
  });