Flutter弹出菜单插件app_popup_menu的使用

app_popup_menu 是一个增强版的Flutter弹出菜单插件，旨在提供更动态和适应性更强的菜单选项。本文将介绍如何安装和使用这个插件，并提供一个完整的示例demo。

安装

首先，在你的 pubspec.yaml 文件中添加 app_popup_menu 依赖：

dependencies:
  app_popup_menu: ^1.0.0

注意：始终使用主要版本号（如 1.0.0），这样可以自动获取次要版本中的新功能和补丁版本中的修复。

示例代码

以下是一个完整的示例demo，展示如何在Flutter应用中使用 app_popup_menu 插件。

main.dart

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: BuildInheritedWidget(child: HomeScreen()),
    );
  }
}

class BuildInheritedWidget extends StatefulWidget {
  final Widget child;

  BuildInheritedWidget({required this.child});

  @override
  _BuildInheritedWidgetState createState() => _BuildInheritedWidgetState();
}

class _BuildInheritedWidgetState extends State<BuildInheritedWidget> {
  String data = '';

  @override
  Widget build(BuildContext context) {
    return InheritedData(
      data: data,
      child: widget.child,
    );
  }
}

class InheritedData extends InheritedWidget {
  final String data;

  InheritedData({required this.data, required Widget child})
      : super(child: child);

  static InheritedData? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<InheritedData>();
  }

  @override
  bool updateShouldNotify(InheritedData oldWidget) {
    return data != oldWidget.data;
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  late AppPopupMenu<String> appMenu01;
  late AppPopupMenu<int> appMenu02;
  late AppPopupMenu<String> appMenu03;

  @override
  void initState() {
    super.initState();

    appMenu01 = AppPopupMenu<String>(
      items: ['Option 1', 'Option 2', 'Option 3'],
      initialValue: 'Option 3',
      onSelected: (String value) {
        InheritedData.of(context)?.data = value;
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('appMenu01 option: $value')),
        );
      },
      tooltip: "Here's a tip for you.",
      elevation: 8,
      icon: const Icon(Icons.settings),
      offset: const Offset(0, 45),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
    );

    appMenu02 = AppPopupMenu<int>(
      menuItems: const [
        PopupMenuItem(value: 1, child: Text('First')),
        PopupMenuItem(value: 2, child: Text('Second')),
      ],
      initialValue: 2,
      onSelected: (int value) {
        InheritedData.of(context)?.data = value.toString();
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('appMenu02 option: $value')),
        );
      },
      onCanceled: () {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('appMenu02: Nothing selected.')),
        );
      },
      tooltip: "Here's a tip for you.",
      elevation: 12,
      icon: const Icon(Icons.tablet),
      offset: const Offset(0, 65),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
      color: Colors.deepOrangeAccent,
    );

    appMenu03 = AppPopupMenu<String>(
      items: ['One', 'Two', 'Three'],
      initialValue: 'Three',
      onSelected: (String value) {
        InheritedData.of(context)?.data = value;
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('appMenu03 option: $value')),
        );
      },
      onCanceled: () {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('appMenu03: Nothing selected.')),
        );
      },
      tooltip: "Here's a tip for you.",
      elevation: 8,
      icon: const Icon(Icons.settings),
      offset: const Offset(0, 45),
      padding: const EdgeInsets.all(16),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Popup Menu Examples'),
        actions: [
          appMenu01,
          appMenu02,
          appMenu03.set(
            initialValue: 'Three',
            onCanceled: () {
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content: Text('appMenu03: Nothing selected.')),
              );
            },
            tooltip: "Here's a tip for you.",
            elevation: 8,
            icon: const Icon(Icons.settings),
            offset: const Offset(0, 45),
            padding: const EdgeInsets.all(16),
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
          ),
        ],
      ),
      body: const MenuOption(),
    );
  }
}

class MenuOption extends StatelessWidget {
  const MenuOption({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final data = InheritedData.of(context)?.data ?? '';
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            '$data',
            style: Theme.of(context).textTheme.headline4,
          ),
        ],
      ),
    );
  }
}

解释

1. InheritedWidget: 使用 InheritedData 组件来传递数据给子组件。
2. AppPopupMenu: 创建多个 AppPopupMenu 实例，分别设置不同的参数。
3. onSelected 和 onCanceled: 当用户选择或取消选择菜单项时，显示相应的 SnackBar 提示信息。
4. AppBar Actions: 在 AppBar 的 actions 中添加 AppPopupMenu 实例。

通过上述步骤，你可以轻松地在Flutter应用中集成并使用 app_popup_menu 插件，创建更美观和动态的弹出菜单。希望这个示例对你有所帮助！