Flutter屏幕覆盖管理插件overlay_manager的使用

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

Flutter屏幕覆盖管理插件overlay_manager的使用

Overlay Manager

Overlay Manager 是一个帮助你在Flutter应用中轻松管理和创建屏幕覆盖(overlays)的插件。它提供了以下功能:

  • 创建一个新的带有屏障选项的覆盖。
  • 按照z-index顺序排列它们。
  • 在关闭时检查、关闭和捕获返回值。

Import

首先,你需要在你的Dart文件中导入 overlay_manager 插件:

import 'package:overlay_manager/overlay_manager.dart';

Create

你可以使用 GlobalOverlayManager 来创建和管理没有上下文的覆盖:

final navKey = GlobalKey<NavigatorState>();
final manager = GlobalOverlayManager(navigatorKey: navKey);

[@override](/user/override)
Widget build(BuildContext context) {
  return MaterialApp(
    navigatorKey: navKey, // 设置导航键
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: const MyHomePage(),
  );
}

或者使用 ContextOverlayManager

final manager = ContextOverlayManager(context: context);

Using

显示一个覆盖

要显示一个覆盖,可以使用 show 方法:

final myEntry = manager.show(
  barrierColor: Colors.red.shade500.withOpacity(0.2), // 屏障颜色
  onDismiss: print, // 关闭时的回调函数
  isDismissible: false, // 是否可以通过点击屏障关闭
  builder: (context, entry) => AlertMessage(
    onClose: () => entry.close(0), // 关闭时返回值
  ),
);

调用 myEntry.close(0) 可以关闭这个覆盖并返回值。

关闭所有覆盖

如果你想在页面销毁时关闭所有覆盖,可以在 dispose 方法中调用 closeAll

[@override](/user/override)
void dispose() {
    manager.closeAll(); // 关闭所有覆盖
    super.dispose();
}
重新排列

所有的覆盖条目会根据其 elevation 值进行z-index排序。你可以在创建新的条目时设置其 elevation

final myEntry = manager.show(
    elevation: 1, // 设置z-index
    // ...
);

或者在创建后重新排列:

myEntry.rearrange(newElevation); // 重新排列

// 或者

myEntry.elevation = 1;
manager.rearrange(); // 重新排列所有覆盖

示例代码

下面是一个完整的示例代码,展示如何使用 overlay_manager 插件:

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

final navKey = GlobalKey<NavigatorState>();
final manager = GlobalOverlayManager(navigatorKey: navKey);

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      navigatorKey: navKey, // 设置导航键
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  void _showOverlay(BuildContext context) {
    final myEntry = manager.show(
      barrierColor: Colors.red.shade500.withOpacity(0.2),
      onDismiss: print,
      isDismissible: false,
      builder: (context, entry) => Center(
        child: GestureDetector(
          onTap: () => entry.close(0), // 点击关闭覆盖
          child: Container(
            color: Colors.blue,
            padding: const EdgeInsets.all(16.0),
            child: const Text('Tap to close', style: TextStyle(color: Colors.white)),
          ),
        ),
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Overlay Manager Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _showOverlay(context), // 显示覆盖
          child: const Text('Show Overlay'),
        ),
      ),
    );
  }
}

更多关于Flutter屏幕覆盖管理插件overlay_manager的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter屏幕覆盖管理插件overlay_manager的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter中使用overlay_manager插件进行屏幕覆盖管理的示例代码。overlay_manager是一个第三方插件,用于在Flutter应用中轻松管理Overlay层。

首先,确保你已经在pubspec.yaml文件中添加了overlay_manager依赖:

dependencies:
  flutter:
    sdk: flutter
  overlay_manager: ^0.x.x  # 请使用最新版本号

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

接下来是一个简单的示例,展示如何使用overlay_manager在Flutter应用中添加一个覆盖层:

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

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

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

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  OverlayManager overlayManager = OverlayManager();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Overlay Manager Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            _showOverlay(context);
          },
          child: Text('Show Overlay'),
        ),
      ),
    );
  }

  void _showOverlay(BuildContext context) {
    overlayManager.add(
      context,
      OverlayEntry(
        builder: (context) => Positioned(
          bottom: 20,
          right: 20,
          child: Material(
            elevation: 10,
            child: Container(
              padding: EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10),
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Text('This is an overlay!'),
                  ElevatedButton(
                    onPressed: () {
                      overlayManager.remove();
                    },
                    child: Text('Close'),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    overlayManager.dispose();
    super.dispose();
  }
}

代码解释

  1. 依赖导入:首先,我们导入了必要的包,包括flutter/material.dartoverlay_manager/overlay_manager.dart

  2. 主应用MyApp是一个简单的MaterialApp,其首页是HomeScreen

  3. 主屏幕HomeScreen是一个有状态的小部件,包含一个按钮,当点击按钮时会显示一个覆盖层。

  4. 覆盖层管理

    • OverlayManager overlayManager = OverlayManager();:创建一个OverlayManager实例。
    • _showOverlay(BuildContext context)方法:使用overlayManager.add方法向Overlay层添加一个OverlayEntryOverlayEntry包含一个Positioned小部件,其内部是一个简单的容器,包含一个文本和一个关闭按钮。
    • 关闭按钮的onPressed回调中调用overlayManager.remove()来移除覆盖层。
  5. 资源清理:在dispose方法中调用overlayManager.dispose()来清理资源。

请注意,overlay_manager插件的API可能会随着版本的更新而有所变化,因此请查阅最新的文档以确保兼容性和正确性。此外,上述示例假设overlay_manager插件提供了OverlayManager类及其相关方法;如果实际插件的API有所不同,请相应调整代码。

回到顶部