Flutter动态覆盖层管理插件listenable_overlay_portal_controller的使用

Flutter 动态覆盖层管理插件 ListenableOverlayPortalController 的使用

ListenableOverlayPortalController

这是一个小型的 Flutter 插件，它扩展了 Flutter 的 OverlayPortalController，使其可以被监听。

使用

示例代码

import 'package:flutter/material.dart';
import 'package:listenable_overlay_portal/listenable_overlay_portal.dart'; // 导入 ListenableOverlayPortal 包

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

class MyApp extends StatelessWidget {
  final listenableController = ListenableOverlayPortalController(); // 创建一个 ListenableOverlayPortalController 实例

  MyApp() {
    listenableController.addListener((isVisible) => print('覆盖层是否可见？$isVisible')); // 添加监听器以监听覆盖层的可见性变化
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('ListenableOverlayPortalController 示例')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  if (listenableController.isVisible) {
                    listenableController.hide(); // 如果覆盖层可见，则隐藏它
                  } else {
                    listenableController.show(); // 否则显示覆盖层
                  }
                },
                child: Text('切换覆盖层'),
              ),
              OverlayPortal( // 使用 OverlayPortal 小部件
                controller: listenableController, // 设置控制器
                child: Container(
                  width: 200,
                  height: 200,
                  color: Colors.red,
                  child: Center(child: Text('这是一个覆盖层', style: TextStyle(color: Colors.white))),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

解释

  1. 导入包：

    import 'package:listenable_overlay_portal/listenable_overlay_portal.dart';

    需要导入 listenable_overlay_portal 包来使用 ListenableOverlayPortalController。

  2. 创建控制器：

    final listenableController = ListenableOverlayPortalController();

    创建一个 ListenableOverlayPortalController 实例。

  3. 添加监听器：

    listenableController.addListener((isVisible) => print('覆盖层是否可见？$isVisible'));

    添加一个监听器来监听覆盖层的可见性变化。每当覆盖层的可见性发生变化时，监听器会打印一条消息。

  4. 使用 OverlayPortal 小部件：

    OverlayPortal(
  controller: listenableController,
  child: Container(
    width: 200,
    height: 200,
    color: Colors.red,
    child: Center(child: Text('这是一个覆盖层', style: TextStyle(color: Colors.white))),
  ),
)

    使用 OverlayPortal 小部件，并设置其控制器为之前创建的 listenableController。当调用 show() 或 hide() 方法时，覆盖层的可见性会发生变化。

  5. 控制覆盖层的显示和隐藏：

    ElevatedButton(
  onPressed: () {
    if (listenableController.isVisible) {
      listenableController.hide();
    } else {
      listenableController.show();
    }
  },
  child: Text('切换覆盖层'),
)

更多关于Flutter动态覆盖层管理插件listenable_overlay_portal_controller的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


当然，以下是一个关于如何使用listenable_overlay_portal_controller插件在Flutter中实现动态覆盖层管理的代码案例。listenable_overlay_portal_controller是一个强大的插件，它允许你以声明式的方式管理Flutter应用中的覆盖层（Overlay）。

首先，确保你已经在pubspec.yaml文件中添加了listenable_overlay_portal_controller依赖：

dependencies:
  flutter:
    sdk: flutter
  listenable_overlay_portal_controller: ^最新版本号

然后，你可以按照以下步骤在你的Flutter应用中实现动态覆盖层管理。

主应用代码 (main.dart)

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Overlay Portal Controller Demo'),
        ),
        body: OverlayPortalScope(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _portalController = OverlayPortalController();

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          onPressed: () {
            _showOverlay();
          },
          child: Text('Show Overlay'),
        ),
      ],
    ).overlayPortalController(_portalController);
  }

  void _showOverlay() {
    _portalController.showPortal(
      PortalEntry(
        portal: Material(
          elevation: 8.0,
          child: Container(
            width: double.infinity,
            padding: EdgeInsets.all(16.0),
            color: Colors.white,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('This is an overlay!'),
                ElevatedButton(
                  onPressed: () {
                    _portalController.closePortal();
                  },
                  child: Text('Close Overlay'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

解释

  1. 依赖导入：首先，在pubspec.yaml中添加listenable_overlay_portal_controller依赖。

  2. 应用结构：MyApp是应用的根组件，它包含一个MaterialApp和一个Scaffold。我们在Scaffold的body中使用了OverlayPortalScope，这是listenable_overlay_portal_controller提供的一个Widget，用于创建覆盖层的作用域。

  3. 状态管理：MyHomePage是一个有状态的Widget，它包含一个OverlayPortalController实例，用于管理覆盖层的显示和隐藏。

  4. 按钮触发：在MyHomePage的build方法中，我们创建了一个按钮。当按钮被点击时，调用_showOverlay方法。

  5. 显示覆盖层：_showOverlay方法使用_portalController.showPortal方法来显示一个覆盖层。PortalEntry包含了覆盖层的内容，这里我们简单地创建了一个包含文本和关闭按钮的容器。

  6. 关闭覆盖层：覆盖层内的关闭按钮调用_portalController.closePortal方法来关闭覆盖层。

这个代码案例展示了如何使用listenable_overlay_portal_controller插件在Flutter应用中动态地管理覆盖层。你可以根据需要自定义覆盖层的内容和样式。

回到顶部