Flutter弹出菜单插件easy_popover的使用

easy_popover 是一个为Flutter应用程序提供的可定制的弹出菜单小部件。它允许开发者显示与特定小部件相关的上下文内容，并具有多种对齐方式、动画和样式配置选项。

主要功能

• 自定义弹出菜单相对于触发小部件的对齐方式。
• 可选的指向触发小部件的箭头。
• 可配置的尺寸、圆角半径、阴影和背景颜色。
• 显示和隐藏弹出菜单时的动画效果。
• 支持点击弹出菜单外区域关闭弹出菜单。
• 打开弹出菜单时支持全屏滚动能力。

安装步骤

在您的项目中添加 easy_popover 插件，执行以下命令：

flutter pub add easy_popover

使用示例

基本使用方法

为了使用 Popover 小部件，需要将应用包裹在 PopoverOverlay 中。下面是一个完整的示例代码：

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

void main() {
  runApp(const PopoverExampleApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Easy Popover Example',
      home: PopoverOverlay(
        child: const PopoverExampleScreen(),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Easy Popover Example'),
        centerTitle: true,
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // Basic IconButton Popover
              Popover(
                context,
                action: IconButton(
                  icon: const Icon(Icons.more_vert_rounded),
                  onPressed: () {},
                ),
                content: const PopoverContent(),
              ),
              const SizedBox(height: 20),
              // Basic Popover with Button
              Popover(
                context,
                action: ElevatedButton(
                  onPressed: () {},
                  child: const Text('Open Popover'),
                ),
                content: const PopoverContent(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      padding: const EdgeInsets.all(16.0),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8.0),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.2),
            blurRadius: 4.0,
          ),
        ],
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'What is Lorem Ipsum?',
            style: Theme.of(context).textTheme.subtitle1,
          ),
          const SizedBox(height: 8),
          Text(
            'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
            style: Theme.of(context).textTheme.bodyText2,
          ),
        ],
      ),
    );
  }
}