Flutter自定义覆盖层弹窗插件custom_overlay_popup的使用

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

Flutter 自定义覆盖层弹窗插件 custom_overlay_popup 的使用

Overlay Popup

一个用于 Flutter 的可定制覆盖层弹窗小部件，允许在用户界面上方显示任何内容，并可选地添加带有可调不透明度的模糊背景效果。此小部件可用于创建模态弹出窗口、提示工具等具有交互内容的功能。

特性

  • 可轻松配置带有子组件和自定义内容的覆盖层弹窗。
  • 支持带可调不透明度的模糊背景。
  • 支持自定义填充以相对于子组件定位弹窗。
  • 内置功能处理弹窗的打开和关闭，包括在弹窗打开时的回调。

安装

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  overlay_popup: <latest_version>

使用

将你的小部件包裹在 OverlayPopup 中，以便在点击时显示弹窗。你可以自定义弹窗的内容、背景模糊效果和填充。

简单示例

import 'package:flutter/material.dart'; // 导入 Flutter 的 material 库以使用 UI 组件。
import 'package:overlay_popup/overlay_popup.dart'; // 导入你的自定义 `OverlayPopup` 小部件。

void main() {
  runApp(const MyApp()); // 启动应用，通过调用 `runApp()` 并传递根小部件 `MyApp`。
}

class MyApp extends StatelessWidget {
  const MyApp({super.key}); // 构造函数为 `MyApp` 小部件，这是一个无状态小部件。

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp( // 创建一个 `MaterialApp` 小部件，设置应用的主题和导航。
      home: Scaffold( // 应用的主要布局结构。
        appBar: AppBar(title: const Text('Overlay Popup Example')), // 创建一个包含标题的应用栏。
        body: Center( // 在屏幕上居中对齐子小部件。
          child: OverlayPopup( // 使用你之前创建的 `OverlayPopup` 小部件。
            child: const Icon(Icons.info, size: 50), // 触发弹窗的小部件（一个信息图标）。
            
            content: (closePopup) => Container( // 弹窗中显示的内容，作为函数传递。
              padding: const EdgeInsets.all(16), // 在弹窗内部的内容周围添加填充。
              color: Colors.white, // 设置弹窗背景颜色为白色。
              child: Column( // 垂直排列多个小部件。
                mainAxisSize: MainAxisSize.min, // 将列的大小最小化以适应其子部件。
                children: [
                  const Text('这是一个弹窗！'), // 在弹窗中显示简单的文本消息。
                  const SizedBox(height: 10), // 在文本和按钮之间添加垂直空间。
                  ElevatedButton( // 在弹窗中创建一个按钮。
                    onPressed: closePopup, // 按钮按下时关闭弹窗。
                    child: const Text('关闭'), // 按钮上的标签。
                  ),
                ],
              ),
            ),

            blurBackground: true, // 当弹窗显示时启用背景模糊。
            blurOpacity: 0.3, // 设置模糊背景的不透明度。
            backgroundColor: Colors.white, // 设置弹窗内容的背景颜色为白色。
            horizontalPadding: 10, // 向弹窗位置添加 10 像素的水平填充。
            verticalPadding: 20, // 向弹窗位置添加 20 像素的垂直填充。
            
            onOpened: () { // 弹窗打开时运行的回调函数。
              print('弹窗已打开'); // 打印 "弹窗已打开" 到控制台。
            },
          ),
        ),
      ),
    );
  }
}

更多关于Flutter自定义覆盖层弹窗插件custom_overlay_popup的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter自定义覆盖层弹窗插件custom_overlay_popup的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter中使用custom_overlay_popup插件创建自定义覆盖层弹窗的示例代码。假设你已经将custom_overlay_popup添加到你的pubspec.yaml文件中并运行了flutter pub get。

首先，确保你的pubspec.yaml文件中包含以下依赖项：

dependencies:
  flutter:
    sdk: flutter
  custom_overlay_popup: ^最新版本号  # 替换为实际的最新版本号

然后，你可以在你的Flutter应用中实现自定义覆盖层弹窗。以下是一个完整的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  OverlayPopupController? _popupController;

  @override
  void initState() {
    super.initState();
    _popupController = OverlayPopupController();
  }

  @override
  void dispose() {
    _popupController?.dispose();
    super.dispose();
  }

  void _showPopup(BuildContext context) {
    _popupController?.showPopup(
      context: context,
      builder: (context) {
        return Material(
          elevation: 8.0,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(12.0),
          ),
          child: Container(
            padding: EdgeInsets.all(16.0),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(12.0),
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Text(
                  '这是一个自定义覆盖层弹窗',
                  style: TextStyle(fontSize: 20),
                ),
                SizedBox(height: 16.0),
                ElevatedButton(
                  onPressed: () {
                    _popupController?.hidePopup();
                  },
                  child: Text('关闭'),
                ),
              ],
            ),
          ),
        );
      },
      position: OverlayPopupPosition.center,
      barrierDismissible: true,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _showPopup(context),
          child: Text('显示弹窗'),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个按钮，点击按钮时会显示一个自定义覆盖层弹窗。弹窗的内容是一个包含文本和关闭按钮的容器。

关键部分包括：

  1. OverlayPopupController：用于控制弹窗的显示和隐藏。
  2. showPopup 方法：用于显示弹窗，并定义弹窗的内容、位置和是否可以通过点击背景关闭。
  3. builder 参数：用于构建弹窗的UI。

确保你已经按照文档正确引入了custom_overlay_popup插件，并根据你的需求调整弹窗的内容和样式。

回到顶部