Flutter弹出菜单插件popup_menu_plus的使用

发布于 1周前 作者 zlyuanteng 来自 Flutter

Flutter弹出菜单插件popup_menu_plus的使用

Popup Menu Plus

Popup Menu Plus 是 chinabrant/popup_menu 的一个分支，它完全用Dart编写，并支持iOS和Android平台。

01 02 03 04

待办事项

  • ❌ 显示/隐藏动画

使用方法

你可以在项目的example文件夹中找到演示代码。以下是popup_menu_plus的基本用法：

基本用法

PopupMenu menu = PopupMenu(
      context: context,
      config: const MenuConfig(
        backgroundColor: Colors.green,
        lineColor: Colors.greenAccent,
        highlightColor: Colors.lightGreenAccent,
      ),
      items: [
        PopUpMenuItem(title: 'Copy', image: Image.asset('assets/copy.png')), 
        PopUpMenuItem(title: 'Home', image: Icon(Icons.home, color: Colors.white,)), 
        PopUpMenuItem(title: 'Mail', image: Icon(Icons.mail, color: Colors.white,)), 
        PopUpMenuItem(title: 'Power', image: Icon(Icons.power, color: Colors.white,)),
        PopUpMenuItem(title: 'Setting', image: Icon(Icons.settings, color: Colors.white,)), 
        PopUpMenuItem(title: 'Traffic', image: Icon(Icons.traffic, color: Colors.white,))], 
      onClickMenu: onClickMenu, 
      onShow: onShow,
      onDismiss: onDismiss);

menu.show(rect: rect);

自定义样式

PopupMenu menu = PopupMenu(
        context: context,
        config: const MenuConfig(
            backgroundColor: Colors.green,
            lineColor: Colors.greenAccent,
            highlightColor: Colors.lightGreenAccent,
        ),
        items: [
          PopUpMenuItem(title: 'Copy', image: Image.asset('assets/copy.png')),
          PopUpMenuItem(
              title: 'Home',
              textStyle: TextStyle(fontSize: 10.0, color: Colors.tealAccent),
              image: Icon(
                Icons.home,
                color: Colors.white,
              )),
          PopUpMenuItem(
              title: 'Mail',
              image: Icon(
                Icons.mail,
                color: Colors.white,
              )),
          PopUpMenuItem(
              title: 'Power',
              image: Icon(
                Icons.power,
                color: Colors.white,
              )),
          PopUpMenuItem(
              title: 'Setting',
              image: Icon(
                Icons.settings,
                color: Colors.white,
              )),
          PopUpMenuItem(
              title: 'PopupMenu',
              image: Icon(
                Icons.menu,
                color: Colors.white,
              ))
        ],
        onClickMenu: onClickMenu,
        onDismiss: onDismiss);
    menu.show(widgetKey: btnKey2);

自定义内容

PopupMenu menu = PopupMenu(
        context: context,
        config: const MenuConfig(
            type: MenuType.custom,
            itemHeight: 200,
            itemWidth: 200,
            backgroundColor: Colors.green,
        ),
        content: Container(
            width: 50,
            height: 50,
            color: Colors.red,
          ),
        onClickMenu: onClickMenu,
        onDismiss: onDismiss);
    menu.show(widgetKey: btnKey2);

示例项目完整代码

以下是一个完整的示例项目代码，展示了如何在Flutter应用中使用popup_menu_plus插件：

// ignore_for_file: avoid_print

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

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Popup Menu Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  PopupMenu? menu;
  GlobalKey btnKey = GlobalKey();
  GlobalKey btnKey2 = GlobalKey();
  GlobalKey btnKey3 = GlobalKey();
  GlobalKey btnKey4 = GlobalKey();
  GlobalKey btnKey5 = GlobalKey();

  void onClickMenu(PopUpMenuItemProvider item) {
    print('Click menu -> ${item.menuTitle}');
  }

  void onDismiss() {
    print('Menu is dismiss');
  }

  void onShow() {
    print('Menu is show');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        alignment: Alignment.centerRight,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Container(
              color: Colors.blue,
              child: MaterialButton(
                height: 45.0,
                key: btnKey,
                onPressed: maxColumn,
                child: const Text('Show Menu'),
              ),
            ),
            MaterialButton(
              key: btnKey2,
              height: 45.0,
              onPressed: customBackground,
              child: const Text('Show Menu'),
            ),
            MaterialButton(
              key: btnKey3,
              height: 45.0,
              onPressed: onDismissOnlyBeCalledOnce,
              child: const Text('Show Menu'),
            ),
            MaterialButton(
              key: btnKey5,
              height: 45.0,
              onPressed: menuCustom,
              child: const Text('Show Menu Custom'),
            ),
            MaterialButton(
              key: btnKey4,
              height: 45.0,
              onPressed: listMenu,
              child: const Text('List Menu'),
            ),
            MaterialButton(
              height: 30.0,
              onPressed: onGesturesDemo,
              child: const Text('Gestures Demo'),
            )
          ],
        ),
      ),
    );
  }

  void onDismissOnlyBeCalledOnce() {
    menu = PopupMenu(
      config: const MenuConfig(
        backgroundColor: Colors.green,
        lineColor: Colors.greenAccent,
        highlightColor: Colors.lightGreenAccent,
      ),
      context: context,
      items: [
        PopUpMenuItem(
            title: 'Mail', image: const Icon(Icons.mail, color: Colors.white)),
        PopUpMenuItem(
            title: 'Power',
            image: const Icon(Icons.power, color: Colors.white)),
        PopUpMenuItem(
            title: 'Setting',
            image: const Icon(Icons.settings, color: Colors.white)),
        PopUpMenuItem(
            title: 'PopupMenu',
            image: const Icon(Icons.menu, color: Colors.white))
      ],
      onClickMenu: onClickMenu,
      onDismiss: onDismiss,
    );
    menu!.show(widgetKey: btnKey3);
  }

  void onGesturesDemo() {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const GestureDemo()),
    );
  }

  void maxColumn() {
    PopupMenu menu = PopupMenu(
      context: context,
      config: const MenuConfig(maxColumn: 3),
      duration: const Duration(milliseconds: 200),
      items: [
        PopUpMenuItem(title: 'Copy', image: Image.asset('assets/copy.png')),
        PopUpMenuItem(
            title: 'Power',
            image: const Icon(Icons.power, color: Colors.white)),
        PopUpMenuItem(
            title: 'Setting',
            image: const Icon(Icons.settings, color: Colors.white)),
        PopUpMenuItem(
            title: 'PopupMenu',
            image: const Icon(Icons.menu, color: Colors.white))
      ],
      onClickMenu: onClickMenu,
      onDismiss: onDismiss,
    );
    menu.show(widgetKey: btnKey);
  }

  void menuCustom() {
    PopupMenu menu = PopupMenu(
      context: context,
      config: MenuConfig(
          type: MenuType.custom,
          itemHeight: 200,
          itemWidth: 400,
          backgroundColor: Colors.blue,
          border: BorderConfig(
            width: 4,
            color: Colors.black,
          )),
      content: Row(
        children: [
          Container(
            width: 50,
            height: 50,
            color: Colors.red,
          ),
        ],
      ),
      onClickMenu: onClickMenu,
      onDismiss: onDismiss,
    );
    menu.show(widgetKey: btnKey5);
  }

  void customBackground() {
    PopupMenu menu = PopupMenu(
        context: context,
        config: const MenuConfig(
          backgroundColor: Color(0xffc1e0f7),
          lineColor: Colors.tealAccent,
        ),
        items: [
          PopUpMenuItem(title: 'Copy', image: Image.asset('assets/copy.png')),
          PopUpMenuItem(
              title: 'Home',
              image: const Icon(Icons.home, color: Colors.white)),
          PopUpMenuItem(
              title: 'Mail',
              image: const Icon(Icons.mail, color: Colors.white)),
          PopUpMenuItem(
              title: 'Power',
              image: const Icon(Icons.power, color: Colors.white)),
          PopUpMenuItem(
              title: 'Setting',
              image: const Icon(Icons.settings, color: Colors.white)),
          PopUpMenuItem(
              title: 'PopupMenu',
              image: const Icon(Icons.menu, color: Colors.white))
        ],
        onClickMenu: onClickMenu,
        onDismiss: onDismiss);
    menu.show(widgetKey: btnKey2);
  }

  void listMenu() {
    PopupMenu menu = PopupMenu(
        context: context,
        config: MenuConfig.forList(
            border: BorderConfig(width: 2, color: Colors.black)),
        items: [
          PopUpMenuItem.forList(
              title: 'Home',
              image:
                  const Icon(Icons.home, color: Color(0xFF181818), size: 20)),
          PopUpMenuItem.forList(
              title: 'Mail',
              image:
                  const Icon(Icons.mail, color: Color(0xFF181818), size: 20)),
          PopUpMenuItem.forList(
              title: 'Power',
              image:
                  const Icon(Icons.power, color: Color(0xFF181818), size: 20)),
          PopUpMenuItem.forList(
              title: 'Setting',
              image: const Icon(Icons.settings,
                  color: Color(0xFF181818), size: 20)),
          PopUpMenuItem.forList(
              title: 'PopupMenu',
              image: const Icon(Icons.menu, color: Color(0xFF181818), size: 20))
        ],
        onClickMenu: onClickMenu,
        onShow: onShow,
        onDismiss: onDismiss);
    menu.show(widgetKey: btnKey4);
  }
}

通过以上代码，你可以创建一个包含多种弹出菜单样式的Flutter应用程序。希望这些信息对你有帮助！如果你有任何问题或需要进一步的帮助，请随时提问。


更多关于Flutter弹出菜单插件popup_menu_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter弹出菜单插件popup_menu_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter中使用popup_menu_plus插件的示例代码。popup_menu_plus是一个用于创建弹出菜单的插件，它提供了比Flutter默认菜单更丰富的功能和自定义选项。

首先，确保你已经在pubspec.yaml文件中添加了popup_menu_plus依赖：

dependencies:
  flutter:
    sdk: flutter
  popup_menu_plus: ^latest_version  # 替换为实际最新版本号

然后，运行flutter pub get来安装依赖。

以下是一个简单的示例，展示了如何使用popup_menu_plus来创建一个弹出菜单：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Popup Menu Plus Example'),
        ),
        body: Center(
          child: MyPopupMenu(),
        ),
      ),
    );
  }
}

class MyPopupMenu extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PopupMenuButtonPlus<String>(
      icon: Icon(Icons.more_vert),
      onSelected: (value) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('You selected: $value')),
        );
      },
      itemBuilder: (context) => [
        PopupMenuItemPlus<String>(
          value: 'Option 1',
          child: ListTile(
            leading: Icon(Icons.star),
            title: Text('Option 1'),
          ),
        ),
        PopupMenuItemPlus<String>(
          value: 'Option 2',
          child: ListTile(
            leading: Icon(Icons.check),
            title: Text('Option 2'),
          ),
        ),
        PopupMenuItemPlus<String>(
          value: 'Option 3',
          child: ListTile(
            leading: Icon(Icons.info),
            title: Text('Option 3'),
          ),
        ),
      ],
    );
  }
}

在这个示例中：

  1. PopupMenuButtonPlus 是一个弹出菜单按钮，它接受一个图标（icon）和一个选择回调（onSelected）。
  2. onSelected 回调会在用户选择一个菜单项时被调用，并传递所选的值。
  3. itemBuilder 是一个构建菜单项的函数，它返回一个PopupMenuItemPlus列表。每个PopupMenuItemPlus都包含一个值和一个子组件（通常是一个ListTile），用于显示菜单项的图标和文本。

当你运行这个应用并点击菜单按钮时，会弹出一个包含三个选项的菜单。选择其中一个选项后，会显示一个SnackBar，显示你选择的值。

这个示例展示了popup_menu_plus的基本用法，你可以根据需要进一步自定义菜单项的样式和行为。

回到顶部