Flutter弹出菜单插件quds_popup_menu的使用

Quds Popup Menu 是一个用于在 Flutter 中展示高级弹出菜单的新方式。它作为 Quds UI Kit 的一部分引入，提供了通过单独的分区来收集命令的功能。

什么是 Quds Popup Menu

Quds Popup Menu 提供了一种新的方法来展示弹出菜单，并允许你将菜单项分组到不同的部分中。

如何使用？

Quds Popup Menu 包含以下组件：

• QudsPopupButton
  • 用于显示 Quds Popup Menu。
• QudsPopupMenuSection
  • 用于添加具有子项的部分。
• QudsPopupMenuItem
  • 用于添加独立的菜单项。
• QudsPopupMenuWidget
  • 用于添加带有自定义小部件的菜单项。
• QudsPopupMenuDivider
  • 用于在菜单项之间添加分隔符。
• showQudsPopupMenu
  • 用于在不使用 QudsPopupButton 的情况下显示 QudsPopupMenu。

示例代码

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Quds Popup Menu Example')),
        body: Center(
          child: QudsPopupButton(
            tooltip: '点击显示菜单',
            items: getMenuItems(),
            child: Icon(Icons.menu),
          ),
        ),
      ),
    );
  }

  List<QudsPopupMenuBase> getMenuItems() {
    return [
      QudsPopupMenuSection(
        backgroundColor: Colors.yellow.shade200,
        titleText: '我的设置',
        subTitle: Text('查看您的配置文件'),
        leading: Icon(
          Icons.redeem,
          size: 40,
        ),
        subItems: [
          QudsPopupMenuSection(
            titleText: '设置',
            leading: Icon(Icons.settings),
            subItems: [
              QudsPopupMenuItem(
                leading: Icon(Icons.logout),
                title: Text('退出登录'),
                onPressed: () {
                  showToast('退出登录');
                },
              )
            ],
          ),
        ],
      ),
      QudsPopupMenuDivider(),
      QudsPopupMenuItem(
        leading: Icon(Icons.info_outline),
        title: Text('反馈'),
        subTitle: Text('帮助我们改进应用'),
        onPressed: () {
          showToast('反馈已提交');
        },
      ),
      QudsPopupMenuDivider(),
      QudsPopupMenuSection(
        leading: Icon(Icons.place),
        titleText: '隐私与安全',
        subItems: [
          QudsPopupMenuItem(
            leading: Icon(Icons.settings),
            title: Text('设置'),
            onPressed: () {
              showToast('设置已更新');
            },
          ),
          QudsPopupMenuItem(
            leading: Icon(Icons.lock),
            title: Text('隐私检查'),
            onPressed: () {
              showToast('隐私检查完成');
            },
          ),
          QudsPopupMenuItem(
            leading: Icon(Icons.lock_clock),
            title: Text('隐私快捷方式'),
            onPressed: () {
              showToast('隐私快捷方式已启用');
            },
          ),
          QudsPopupMenuItem(
            leading: Icon(Icons.list),
            title: Text('活动日志'),
            onPressed: () {
              showToast('活动日志已查看');
            },
          ),
          QudsPopupMenuItem(
            leading: Icon(Icons.card_membership),
            title: Text('新闻源偏好'),
            onPressed: () {
              showToast('新闻源偏好已保存');
            },
          ),
          QudsPopupMenuItem(
            leading: Icon(Icons.language),
            title: Text('语言'),
            onPressed: () {
              showToast('语言已更改');
            },
          ),
        ],
      ),
      QudsPopupMenuDivider(),
      QudsPopupMenuWidget(
        builder: (context) => Container(
          padding: EdgeInsets.all(10),
          child: IntrinsicHeight(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButton(
                  onPressed: () {
                    showToast('收藏已添加');
                  },
                  icon: Icon(
                    Icons.favorite,
                    color: Colors.red,
                  ),
                ),
                VerticalDivider(),
                IconButton(
                  onPressed: () {},
                  icon: Icon(
                    Icons.music_note,
                    color: Colors.blue,
                  ),
                ),
                VerticalDivider(),
                IconButton(
                  onPressed: () {},
                  icon: Icon(
                    Icons.umbrella,
                    color: Colors.green,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    ];
  }

  void showToast(String message) {
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(message)));
  }
}