SwiftUICardStack 0.0.5

SwiftUICardStack 0.0.5

×

由 Deniz Adalar 维护。

SwiftUICardStack 0.0.5

  • 作者：
  • Deniz Adalar

🃏CardStack

Swift Version License Platform

一个简单易用的 SwiftUI 视图，用于 iOS、macOS 和 watchOS 上的类似 Tinder 的卡片。

Alt text

安装

Xcode 11 & Swift Package Manager

在 Xcode 或 SPM package.swift 文件中使用包仓库 URL： https://github.com/dadalar/SwiftUI-CardStackView.git

CocoaPods

CardStack 可通过 CocoaPods 获取。安装它，只需将以下行添加到您的 Podfile 中

pod "SwiftUICardStack"

使用

该组件的使用方法类似于 SwiftUI 的 List。基本实现如下

@State var cards: [Card] // This is the data to be shown in CardStack

CardStack(
  direction: LeftRight.direction, // See below for directions
  data: cards,
  onSwipe: { card, direction in // Closure to be called when a card is swiped.
    print("Swiped \(card) to \(direction)")
  },
  content: { card, direction, isOnTop in // View builder function
    CardView(card)
  }
)

方向

CardStack需要知道哪些方向可用以及如何将滑动角度转换为该方向。这是一个有意的决定，以便在保持类型安全的同时使组件易于扩展。需要传递给CardStack初始化器的参数是一个简单的(Double) -> Direction?函数。这里的Double输入是角度（以度为单位），其中0指向向上，180指向向下。Direction是一个泛型类型，这意味着此库的用户可以使用他们自己的类型。从该函数返回nil以表示该角度不是有效的方向（用户将无法向该方向滑动）。

以下是一些预定义的方向（LeftRight、FourDirections、EightDirections），它们各自定义了一个可以用于CardStack初始化器的方向(double:)函数。您可以在示例项目中查看自定义方向实现的示例。

配置

CardStack可以使用SwiftUI的标准环境值进行配置，它可以直接设置在CardStack或其封装视图中。

CardStack(
  // Initialize
)
.environment(\.cardStackConfiguration, CardStackConfiguration(
  maxVisibleCards: 3,
  swipeThreshold: 0.1,
  cardOffset: 40,
  cardScale: 0.2,
  animation: .linear
))

用例：添加项目

加载新数据并将其附加到堆栈上非常简单。只需确保数据属性被标记为@State，然后您就可以向数组中添加项目。请查看示例项目以获取实际场景的示例。

struct AddingCards: View {
  @State var data: [Person] // Some initial data

  var body: some View {
    CardStack(
      direction: LeftRight.direction,
      data: data,
      onSwipe: { _, _ in },
      content: { person, _, _ in
        CardView(person: person)
      }
    )
    .navigationBarItems(trailing:
      Button(action: {
        self.data.append(contentsOf: [ /* some new data */ ])
      }) {
        Text("Append")
      }
    )
  }
}

用例：重新加载项目

由于组件保留了对当前卡片的内部索引，更改数据的顺序或在当前项目之前添加/删除项将破坏组件。如果您想替换整个数据，则需要通过更改组件的id来强制SwiftUI重新构造组件。请查看示例项目以获取实际场景的示例。

struct ReloadCards: View {
  @State var reloadToken = UUID()
  @State var data: [Person] = Person.mock.shuffled()

  var body: some View {
    CardStack(
      direction: LeftRight.direction,
      data: data,
      onSwipe: { _, _ in },
      content: { person, _, _ in
        CardView(person: person)
      }
    )
    .id(reloadToken)
    .navigationBarItems(trailing:
      Button(action: {
        self.reloadToken = UUID()
        self.data = Person.mock.shuffled()
      }) {
        Text("Reload")
      }
    )
  }
}

作者

Deniz Adalar, [email protected]

授权协议

CardStack 适用于 MIT 授权协议。更多信息请参阅 LICENSE 文件。