ExytePopupView 3.0.4

ExytePopupView 3.0.4

×

由 Exyte 维护。

ExytePopupView 3.0.4

浮动 吐司 弹出窗口 工作表

弹出视图

使用 SwiftUI 编写的 Toasts、Alerts 和弹出窗口库

我们是一家致力于构建 卓越 应用程序的软件开发机构。

SPM Compatible Cocoapods Compatible Carthage Compatible License: MIT

更新到版本 2

而不是

.popup(isPresented: $floats.showingTopFirst, type: .floater(), position: .top, animation: .spring(), closeOnTapOutside: true, backgroundColor: .black.opacity(0.5)) {
    FloatTopFirst()
}

使用

.popup(isPresented: $floats.showingTopFirst) {
    FloatTopFirst()
} customize: {
    $0
        .type(.floater())
        .position(.top)
        .animation(.spring())
        .closeOnTapOutside(true)
        .backgroundColor(.black.opacity(0.5))
}

使用此 API，您可以以任意顺序传递参数。

在导航栏上方显示

为了在所有其他视图（包括导航栏）上方显示您的弹出窗口，请使用：

.popup(isPresented: $floats.showingTopFirst) {
    FloatTopFirst()
} customize: {
    $0.isOpaque(true)
}

这意味着您也无法通过popup的背景触摸“背后的”任何控件（因为这实际上使用的是透明的fullscreenSheet，它不会将触摸传递到下面的视图）。不透明的popup使用屏幕尺寸来计算其位置。

不幸的是，如果opaque为false（以便在需要时允许“穿透触摸”），即使强制设置为全屏，popup也会显示在navbar下方（如果您知道如何绕过此限制，请在上面的评论中告诉我）。请注意，在这种情况下，popup使用您附加到的视图的frame来计算其位置，以避免在navbar下方。因此，您可能希望将其附加到您屏幕的根视图中。

使用方法

  1. 添加一个布尔参数来控制popup的展示状态
  2. 在您的视图上添加.popup修饰符。
import PopupView

struct ContentView: View {

    @State var showingPopup = false

    var body: some View {
        YourView()
            .popup(isPresented: $showingPopup) {
                Text("The popup")
                    .frame(width: 200, height: 60)
                    .background(Color(red: 0.85, green: 0.8, blue: 0.95))
                    .cornerRadius(30.0)
            } customize: {
                $0.autohideIn(2)
            }
    }
}

必需参数

isPresented - 该绑定用于确定popup是否显示在屏幕上或隐藏
view - 您希望在popup上显示的视图

或

item - 用于项目的绑定：如果项目值为nil - popup隐藏，如果非nil - 显示。请注意 - 在关闭动画期间，库会复制您的项目！
view - 您希望在popup上显示的视图

可用自定义选项 - 可选参数

在弹出式修改器中使用 customize 封闭

type - toast, float 或默认。浮动器有自己的参数

  • verticalPadding - 定义从相对垂直边缘的填充，如果 useSafeAreaInset 为 true，将添加到安全区域
  • horizontalPadding - 定义从相对水平边缘的填充，如果 useSafeAreaInset 为 true，将添加到安全区域
  • useSafeAreaInset - 是否包括安全区域填充在浮动器填充中

position - topLeading, top, topTrailing, leading, center, trailing, bottomLeading, bottom, bottomTrailing appearFrom - top, bottom, left, right：确定出现动画的方向。如果为空，则复制 position 参数：从 .top 边缘出现，如果 position 设置为 .top animation - 弹出式滑入屏幕的定制动画
autohideIn - 弹出式消失的时间
dragToDismiss - 默认为 true：启用/禁用拖动以关闭（.top 弹出式类型向上，.bottom 和默认类型向下）
closeOnTap - 默认为 true：启用/禁用对弹出式进行点击以关闭
closeOnTapOutside - 默认为 false：启用/禁用在外部弹出式上点击关闭
backgroundColor - 默认为 Color.clear：更改外部区域的背景颜色
backgroundView - 用于外部区域的自定义背景构建器（如果设置了此选项，则忽略 backgroundColor）
isOpaque - 默认为 false：如果为 true，则点击不会穿过弹出式的背景，并且弹出式显示在导航栏之上。如果 closeOnTapOutside 为 true，则始终不透明。更多信息请参阅“显示在导航栏之上”部分
dismissCallback - 弹出式消失后调用的定制回调

可拖动卡片 - 表单

要实现表单（如第 4 个 gif），请在底部 toast enable dragToDismiss（见示例项目以实现卡片本身）

.popup(isPresented: $show) {
    // your content 
} customize: {
    $0
        .type (.toast)
        .position(bottom)
        .dragToDismiss(true)
}

示例

尝试使用 PopupView 示例

  • 克隆仓库 https://github.com/exyte/PopupView.git
  • 打开终端并运行 cd <PopupViewRepo>/Example/
  • 运行 pod install 以安装所有依赖项
  • 运行并打开 PopupViewExample.xcworkspace/ 以在 Xcode 中打开项目
  • 试试看！

安装

Swift 包管理器

dependencies: [
    .package(url: "https://github.com/exyte/PopupView.git")
]

CocoaPods

要安装 PopupView，只需将以下行添加到 Podfile 中：

pod 'ExytePopupView'

Carthage

要使用 Carthage 将 PopupView 集成到 Xcode 项目中，请在 Cartfile 中指定它。

github "Exyte/PopupView"

需求

  • iOS 15.0+ / macOS 11.0+ / tvOS 14.0+ / watchOS 7.0+
  • Xcode 12+

我们的其他开源SwiftUI库

Grid - 最强大的网格容器
ScalingHeaderScrollView - 带有粘性头部并且滚动时缩小的滚动视图
AnimatedTabBar - 预设动画的TabBar
MediaPicker - 可定制的媒体选择器
Chat - 拥有完全自定义消息单元格、输入视图和内置媒体选择器的聊天UI框架
ConcentricOnboarding - 动画化的引导流程
FloatingButton - 悬浮按钮菜单
ActivityIndicatorView - 多种动画加载指示器
ProgressIndicatorView - 多种动画进度指示器
SVGView - SVG解析器
LiquidSwipe - 液体导航动画