交互式胶囊悬浮窗

一个 Swift Package，用于在所有其他内容（包括模态窗口）之上呈现可配置的交互式胶囊悬浮窗。

A Demo of this package

用法

安装

与其他 Swift Package 一样，安装 Interactive Capsule Overlay，只需将其添加到 Package.swift 文件的 dependencies 部分即可。

.package(url: "https://github.com/lontronix/Interactive-Capsule-Overlay", from: "1.1.0")

将 showsInteractiveCapsuleOverlay View Modifier 添加到应用程序的根视图。

import InteractiveCapsuleOverlay

@main
struct ExampleApp: App {
    var body: some Scene {
        WindowGroup {
            RootView()
              .showsInteractiveCapsuleOverlay()
        }
    }
}

创建自定义配置

创建一个自定义 CapsuleOverlayConfiguration

CapsuleOverlayConfiguration

参数 类型 描述
title String 胶囊中显示的突出文本
timeoutInterval TimeInterval 胶囊在自动关闭前显示的持续时间
primaryAction ActionConfiguration 点击胶囊上的任何位置（但二级操作按钮除外）时调用的操作
secondaryAction ActionConfiguration 点击二级按钮时调用的操作
onDismissButtonPressed (() -> Void)? 用户点击关闭按钮时调用的闭包

ActionConfiguration

case: disabled

该操作被禁用并隐藏

case: enabled

该操作被启用并可见

参数 类型 描述
iconIdentifier String 用于表示操作的图标（一个 SF Symbol 名称）
onPressed () -> Void 当用户调用该操作时，此库调用的回调

PresentationMode

case: top

悬浮窗从屏幕顶部呈现。

case: bottom

悬浮窗从屏幕底部呈现。

参数 类型 描述
yOffset CGFloat 胶囊从屏幕顶部或底部（基于模式）偏移的距离。

注意： 对于底部模式，指定的值会自动取反。（例如，20 表示将胶囊向上移动 20 个点）

CapsuleOverlayConfiguration

import InteractiveCapsuleOverlay

extension CapsuleOverlayConfiguration { 

    static func taskCompleted(accentColor: Color) -> CapsuleOverlayConfiguration {
        return CapsuleOverlayConfiguration(
            title: "Task Completed",
            primaryAction: .enabled(iconIdentifier: "slider.horizontal.3", onPressed: {
                // Do something
            }),
            timeoutInterval: 5,
            secondaryAction: .enabled(iconIdentifier: "arrow.uturn.backward.circle.fill", onPressed: {
                // Do something
            }),
            accentColor: accentColor
        )
    }

}

显示悬浮窗

使用 showOverlay 环境变量以所需的配置显示胶囊。

import InteractiveCapsuleOverlay

struct ContentView: View { 
    
    @Environment(\.showOverlay) private var showOverlay
    
    var body: some View {
        Button("Complete Task") {
            showOverlay(.taskCompleted(.blue))
        }
    }

}