CardStack

一个 SwiftUI 包，可让您在项目中实现可滑动卡片。

要求

iOS 13.0+
Xcode 11.0

安装

安装 CardStack 的首选方式是通过 Swift Package Manager。

在 Xcode 中，打开您的项目并导航到 File → Swift Packages → Add Package Dependency...
粘贴仓库 URL（https://github.com/nhoogendoorn/CardStack）并点击 Next。
对于 Rules，选择 Version（使用 Up to Next Major）。
点击 Finish。

使用示例

有关完整示例，请参阅示例项目。

通过传递 CardView 和 CardData 来初始化 CardStack 视图。CardView 是一个继承自 View 的协议，而 CardData 是一个继承自 Identifiable 的协议。

CardData

CardData 对象只需要有一个 id，但其余部分可以包含任何类型的数据。

import SwiftUI
import CardStack

struct DataExample: CardData {
    var id: String
    var color: Color
}

CardView

Card View 将可以访问您定义为 CardData 的数据。

import SwiftUI
import CardStack

struct CardExampleView: Card {
    var data: DataExample?
    
    init<CardData>(data: CardData) where CardData: CardData {
        if let infoData = data as? DataExample {
            self.data = infoData
        }
    }
    
    var body: some View {
        data?.color
            .frame(width: 200, height: 200)
            .shadow(color: Color.black.opacity(0.1), radius: 3, x: 0, y: 0)
        .cornerRadius(8)
    }
}

CardStackView

CardStack 是所有卡片的主要容器。

import SwiftUI
import CardStack

struct StackExampleView: View {
    let items: [DataExample] = [DataExample(id: UUID().uuidString, color: .red),
                 DataExample(id: UUID().uuidString, color: .blue),
                 DataExample(id: UUID().uuidString, color: .yellow),
                 DataExample(id: UUID().uuidString, color: .green),
                 DataExample(id: UUID().uuidString, color: .orange)
    ]
    
    let configuration = StackConfiguration()
    
    var body: some View {
        CardStack<CardExampleView, DataExample>(configuration: nil, items: items)
    }
}

配置

在配置文件中，您可以设置以下参数

/// Sets the index the card list should start with. Setting it to 3, would show the card for index 3 for example when the View loads. Default value is `0`..
var startIndex: Int = 0

/// The minimum swiping distance before the dragging starts.
var minimumSwipingDistance: CGFloat = 0

/// The number of cards shown in the View at the same time.
var numberOfCardsShown: Int = 3

/// Access the default configuration
static var shared = StackConfiguration()

作者

Niels Hoogendoorn

许可证

CardStack 在 MIT 许可证下可用。有关更多信息，请参阅 LICENSE 文件。