SlideOverCard

一个 SwiftUI 卡片设计，类似于 Apple 在 HomeKit、AirPods、Apple Card 和 AirTag 设置、NFC 扫描、Wi-Fi 密码共享等应用中使用的设计。它特别适合设置交互。

从左到右：SlideOverCard 应用于 Clear Spaces、一个二维码扫描提示 (使用 CodeScanner 构建) 和一个示例演示应用

安装

此仓库是一个 Swift 包，只需将其包含在您的 Xcode 项目中，并在 File > Add package dependencies 下进行定位。然后，在您要使用它的 Swift 文件中 import SlideOverCard。

注意

如果您的应用在 iOS 13 上运行，您可能会发现布局中的键盘响应存在问题。这是由 SwiftUI 的一个限制造成的，因为 ignoresSafeArea 修饰符仅在 iOS 14 更新中为 SwiftUI 框架引入。

用法

将卡片添加到您的应用非常简单。只需在您的视图层次结构中的任何位置添加一个 .slideOverCard() 修饰符，类似于 .sheet()

.slideOverCard(isPresented: $isPresented) {
  // Here goes your awesome content
}

就这样！它就能工作了。在这种情况下，$isPresented 是一个布尔绑定。这样您就可以通过将其设置为 false 随时关闭视图。

额外步骤

自定义

默认的 .slideOverCard() 修饰符将默认设置转换、拖动和点击控件以及关闭按钮。您可以通过手动设置 SOCOptions 选项集来覆盖此设置

// This creates a card that can be dragged, but not dismissed by dragging
.slideOverCard(isPresented: $isPresented, options: [.disableDragToDismiss]) {
}

// This creates a card that can't be dragged nor dismissed by dragging
.slideOverCard(isPresented: $isPresented, options: [.disableDrag, .disableDragToDismiss]) {
}

// This creates a card that can't be dismissed by an outside tap
.slideOverCard(isPresented: $isPresented, options: [.disableTapToDismiss]) {
}

// This creates a card with no dismiss button
.slideOverCard(isPresented: $isPresented, options: [.hideDismissButton]) {
}

如果您想更改卡片的样式属性，例如圆角大小、圆角样式、内部和外部填充、昏暗不透明度和形状填充样式（例如渐变），只需指定自定义的 SOCStyle 结构体。

.slideOverCard(isPresented: $isPresented, style: SOCStyle(cornerRadius: 24.0,
                                                          continuous: false,
                                                          innerPadding: 16.0,
                                                          outerPadding: 4.0,
                                                          dimmingOpacity: 0.1,
                                                          style: .black)) {
}

如果您希望在视图关闭时（通过退出按钮或拖动控件）执行代码，您还可以设置一个可选的 onDismiss 闭包参数

// This card will print some text when dismissed
.slideOverCard(isPresented: $isPresented, onDismiss: {
    print("I was dismissed.")
}) {
    // Here goes your amazing layout
}

或者，您可以使用绑定到可选的可识别对象的绑定来添加卡片。这将自动在屏幕更改之间动画化卡片。

// This uses a binding to an optional object in a switch statement
.slideOverCard(item: $activeCard) { item in
    switch item {
        case .welcomeView:
            WelcomeView()
        case .loginView:
            LoginView()
        default:
            ..........
    }
}

辅助视图

此包还包括一些辅助视图，以增强您的卡片布局。第一个是 SOCActionButton() 按钮样式，它可以应用于任何按钮，根据应用的强调颜色赋予它默认的“主要操作”外观。 SOCAlternativeButton() 样式将重现相同的设计，但使用灰色。 SOCEmptyButton() 将创建一个仅包含文本的按钮。您可以这样使用它们

Button("Do something") {
  ...
}.buttonStyle(SOCActionButton()) // Use the modifier of your choice

还有 SOCDismissButton() 视图。此视图将创建用于卡片的默认关闭按钮图标（基于 https://github.com/joogps/ExitButton）。

演示

您可以在此仓库的 demo 分支中查看此包的演示项目。