Flutter锚定弹出窗口插件anchored_popups的使用

Flutter锚定弹出窗口插件anchored_popups的使用

anchored_popups 是一个用于在Flutter应用中显示上下文菜单的插件，支持右键点击或长按触发。下面我们将详细介绍如何安装和使用该插件，并提供一个完整的示例代码。

🔨 安装

首先，在 pubspec.yaml 文件中添加 anchored_popups 依赖：

dependencies:
  anchored_popups: ^0.1.0

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

⚙ 导入

在你的 Dart 文件中导入 anchored_popups 包：

import 'package:anchored_popups/anchored_popups.dart';

🕹️ 使用

anchored_popups 提供了一个名为 AnchoredPopUpRegion 的小部件，它可以将弹出窗口锚定到特定的小部件上。你可以通过设置 anchor 和 popAnchor 属性来控制弹出窗口相对于目标小部件的位置。

示例代码

以下是一个完整的示例代码，展示了如何使用 anchored_popups 插件创建不同类型的锚定弹出窗口：

import 'package:anchored_popups/anchored_popup_region.dart';
import 'package:anchored_popups/anchored_popups.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return AnchoredPopups(
      child: MaterialApp(
        home: PopupTests(),
      ),
    );
  }
}

class PopupTests extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 示例1：底部右对齐的弹出窗口
          Positioned(
            bottom: 0,
            right: 0,
            child: AnchoredPopUpRegion(
              anchor: Alignment.centerLeft, // 弹出窗口相对于目标小部件的锚点
              popAnchor: Alignment.centerRight, // 弹出窗口自身的锚点
              popChild: Card(child: Text("centerLeft to centerRight")), // 弹出窗口的内容
              child: Container(width: 50, height: 50, child: Placeholder()), // 目标小部件
            ),
          ),
          
          Center(
            child: SeparatedColumn(
              mainAxisAlignment: MainAxisAlignment.center,
              separatorBuilder: () => SizedBox(height: 10),
              children: [
                Text("悬停在方块上以显示不同的行为。"),
                
                // 示例2：底部左对齐的弹出窗口
                AnchoredPopUpRegion(
                  anchor: Alignment.bottomLeft,
                  popAnchor: Alignment.bottomRight,
                  popChild: Card(child: Text("BottomLeft to BottomRight")),
                  child: Container(width: 50, height: 50, child: Placeholder()),
                ),
                
                // 示例3：居中对齐的弹出窗口
                AnchoredPopUpRegion(
                  anchor: Alignment.center,
                  popAnchor: Alignment.center,
                  popChild: Card(child: Text("Center to Center")),
                  child: Container(width: 50, height: 50, child: Placeholder()),
                ),
                
                OutlinedButton(onPressed: () {}, child: Text("Btn1")),
                OutlinedButton(onPressed: () {}, child: Text("Btn2")),
                
                // 示例4：点击显示表单的弹出窗口
                AnchoredPopUpRegion(
                  mode: PopUpMode.clickToToggle, // 点击切换弹出窗口的显示状态
                  anchor: Alignment.centerRight,
                  popAnchor: Alignment.centerLeft,
                  buttonBuilder: (_, child, show) {
                    return TextButton(child: child, onPressed: show); // 自定义按钮
                  },
                  popChild: Card(
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Text("CenterRight to CenterLeft"),
                        TextButton(
                          onPressed: () {
                            AnchoredPopups.of(context).hide(); // 关闭弹出窗口
                          },
                          child: Text("关闭弹出窗口"),
                        )
                      ],
                    ),
                  ),
                  child: Container(
                    child: Card(
                      child: Text("点击我获取更多信息..."),
                    ),
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}