Flutter浮动视图插件flutter_portal的使用

Flutter中的flutter_portal插件提供了一种声明式的方法来创建和管理浮动视图，如工具提示、上下文菜单、对话框等。它改进了Flutter内置的Overlay/OverlayEntry机制，使其更加直观、易于对齐，并且可以更好地与Flutter的声明式UI模型结合使用。

🚀 优点

• 声明式而非命令式：像Flutter中的其他所有内容一样，覆盖层（portals）现在是声明式的。只需将浮动UI作为普通小部件放入小部件树中。
• 轻松对齐：内建支持将覆盖层相对于UI组件对齐。
• 直观的Context：覆盖层条目构建时使用其直观的父级作为context。

此外，还有以下优点：

• 易于恢复属性：由于显示覆盖层就像调用setState一样简单，因此RestorableProperty可以很好地工作。
• 正确的Theme/provider：覆盖层条目可以访问与显示覆盖层的小部件相同的Theme和不同的providers。

👀 示例代码

PortalTarget(
  // 声明式：只需提供`portalFollower`作为普通小部件
  portalFollower: MyAwesomeOverlayWidget(),
  // 对齐“跟随者”相对于“子项”
  anchor: Aligned.center,
  child: MyChildWidget(),
)

🪜 示例

查看示例文件夹了解如何使用flutter_portal：

• 上下文菜单
• 日期选择器
• 发现（引导视图）
• Medium鼓掌
• 模态框
• 圆角

🧭 使用方法

1. 安装插件。遵循标准安装此包的程序。最简单的方法可能是flutter pub add flutter_portal。
2. 添加Portal小部件。例如，将其放置在MaterialApp之上。每个应用程序只需要一个Portal。
3. 在需要显示覆盖层的地方使用PortalTarget。

📚 教程：显示上下文菜单

添加Portal小部件

Portal(
  child: MaterialApp(...)
)

创建按钮

class MenuExample extends StatefulWidget {
  @override
  _MenuExampleState createState() => _MenuExampleState();
}

class _MenuExampleState extends State<MenuExample> {
  bool isMenuOpen = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: PortalTarget(
          visible: isMenuOpen,
          anchor: const Aligned(
            follower: Alignment.topLeft,
            target: Alignment.topRight,
          ),
          portalFollower: GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () {
              setState(() {
                isMenuOpen = false;
              });
            },
            child: Material(
              elevation: 8,
              child: IntrinsicWidth(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    ListTile(title: Text('option 1')),
                    ListTile(title: Text('option 2')),
                  ],
                ),
              ),
            ),
          ),
          child: ElevatedButton(
            onPressed: () {
              setState(() {
                isMenuOpen = true;
              });
            },
            child: Text('show menu'),
          ),
        ),
      ),
    );
  }
}

完整示例

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Portal(
      child: MaterialApp(
        home: MenuExample(),
      ),
    );
  }
}

class MenuExample extends StatefulWidget {
  @override
  _MenuExampleState createState() => _MenuExampleState();
}

class _MenuExampleState extends State<MenuExample> {
  bool isMenuOpen = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter Portal Example')),
      body: Center(
        child: PortalTarget(
          visible: isMenuOpen,
          anchor: const Aligned(
            follower: Alignment.topLeft,
            target: Alignment.topRight,
          ),
          portalFollower: GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () {
              setState(() {
                isMenuOpen = false;
              });
            },
            child: Material(
              elevation: 8,
              child: IntrinsicWidth(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    ListTile(title: Text('Option 1'), onTap: () {}),
                    ListTile(title: Text('Option 2'), onTap: () {}),
                  ],
                ),
              ),
            ),
          ),
          child: ElevatedButton(
            onPressed: () {
              setState(() {
                isMenuOpen = true;
              });
            },
            child: Text('Show Menu'),
          ),
        ),
      ),
    );
  }
}

通过以上步骤，您可以轻松地在Flutter应用中实现上下文菜单或其他类型的浮动视图。希望这个教程能帮助您更好地理解和使用flutter_portal插件。