SwiftUI极简教程18:SwipeCard卡片滑动效果的使用（上）-六虎

一起养成写作习惯！这是我参与「日新计划 4 月更文挑战」的第18天，点击查看活动详情。

今日职言：如果内容重要，就要重复强调重要的内容。

在本章中，你将学会如何使用Gestures手势和Animations动画swift是什么实现手势密码SwipeCard卡片滑动的效果。

在很多交友类的App当中，我们可以看到有一个“向左向右滑动卡片”的交互，用户向右滑动可以给照片喜欢点赞，向左滑动可以给照片点不喜欢。

那动画片小猪佩奇么在这章，我们来试试构建一个类似SwipeCard卡片滑动交互效果的简单应用。

好了，我们开始吧！

首先，创建一个新项目，命名为SwiftUISwipeCard。

我们先在Assets.xc手势密码图案大全assets导入一批图片，作为素材使用。可以找一些风景图片，或者人像图片、食物图片，只要是一个系列的图片集就行。不要忘记给图片重动画片小猪佩奇新手势语命名，以便于手势密码图案大全我们在代码更好地找到和引用图片数组词。手势密码

在实现滑动功能之数组和链表的区别前，让我们先创建主要的UI页面，我们将动画片小猪佩奇把主页动画专业面分成三个部分:

1.TopBarMenu顶部导航栏

CardView卡片视图

3.BottomBarMenu底部菜单栏

TopBarMenu顶部导航栏

在这里我们创建一个新的结swiftly构体页面来展示TopBarMenu顶部导航栏视图，我手势识别们命名为TopBarMenu。

代码如下：

//顶部导航栏
struct TopBarMenu: View {
var body: some View {
HStack {
Image(systemName: "ellipsis.circle")
.font(.system(size: 30))
Spacer()
Image(systemName: "heart.circle")
.font(.system(size: 30))
}.padding()
}
}

这里我们没有使用.NavigationView顶部导航栏，swift系统是因为在很多时候，我们的导航栏都需要很手势舞视频多定制化的功能，而在.NavigationView顶部导航数组c语言栏中可能很难支持到我们实际的业务，所以“成熟的”程序猿都喜欢自己写顶部导航栏样式。

上面数组我们做的T手势密码opBarMenu顶部导航栏很简单，就2张图片，手势识别使用横向HStack排布。然后我们在CardView里引用TopBarMenu顶部导航栏视图，效果如下：

CardView卡片视图

接着，我们创建一个新的结构体数组公式页面来展示卡片视图，命名为手势舞CardView。

代码如下：动画片汪汪队

//卡片视图
struct CardView: View {
var body: some View {
Image("image01")
.resizable()
.frame(minWidth: 0, maxWidth: .infinity)
.cornerRadius(10)
.padding(.horizontal, 15)
.overlay(
VStack {
Text("图片01")
.font(.system(.headline, design: .rounded)).fontWeight(.bold)
.padding(.horizontal, 30)
.padding(.vertical, 10)
.background(Color.white)
.cornerRadius(5)
}
.padding([.bottom], 20), alignment: .bottom
)
}
}

Car数组的定义dView卡片视图也非常简单，我们放在一个Image图片，让将一个Text文字“悬浮”在图片底部。我们在CardView里引用CardView卡片视图，由于CardVie动画片小猪佩奇w卡片视图和TopBarMenu顶部导航栏是纵向排列，我们使用VStack包裹住。

struct ContentView: View {
var body: some View {
VStack {
TopBarMenu()
CardView()
}
}
}

BottomBarMenu底部菜单栏

底部导航栏也是如此，我们创建一个新的结构体页面叫做BottomBarMenu。

代码数组初始化如下：数组的定义

// 底部导航栏
struct BottomBarMenu: View {
var body: some View {
HStack {
Image(systemName: "xmark")
.font(.system(size: 30))
.foregroundColor(.black)
Button(action: {
}) {
Text("立即选择")
.font(.system(.subheadline, design: .rounded)).bold()
.foregroundColor(.white)
.padding(.horizontal, 35)
.padding(.vertical, 15)
.background(Color.black)
.cornerRadius(10)
}.padding(.horizontal, 20)
Image(systemName: "heart")
.font(.system(size: 30))
.foregroundColor(.black)
}
}
}

BottomBarMenu底部导航栏也是我们自己写的，使用3个元素，2个Image图片，1个Text文字按钮。然后也在ContentView主要页面中展示它，效果如下：

我们进一步美化动画专业下样式，使用Spacer()分开CardView卡片视图和BottomBarMenu底部导航栏视图，我们保持最小20的区域，就得到了下面的效果。

struct ContentView: View {
var body: some View {
VStack {
TopBarMenu()
CardView()
Spacer(minLength: 20)
BottomBarMenu()
    }
}
}

好了，基swift代码础的样式我们做完了。

交互逻辑分析

接下来，可以实现Swswift翻译ipeCard卡片滑动的效果了。先解释一下SwipeCard卡片滑动的原理，你可以它想象成一组叠在一起的卡片，每张动画片熊出没卡片都显示一张照片。

我们将动画片汪汪队最上面的那张卡，即第一张图片，稍微向左或向右刷一下，就会打开下面swift系统的下一张卡片，也就是第二张图片。

如果你放开卡片，卡片会回到原来的位置。但如果你用力滑动图片动画电影卡片，SwiftUI就可swift国际结算系统以将图片卡片“丢掉”，系统就会将把第二张图片向前拉变成最上面的图片展示。

我们了解了原理后，我们swift是什么先实现CardView卡片部分的内容。这里使用ZStack将一堆卡片“堆在”一起手势舞教程视频慢动作，而图片卡片的遍历方式之前的章节已经学过。

//创建Album定义变量
struct Album: Identifiable {
var id = UUID()
var name: String
var image: String
}
//创建演示数据
var album = [
Album(name: "图片01", image: "image01"),
Album(name: "图片02", image: "image02"),
Album(name: "图片03", image: "image03"),
Album(name: "图片04", image: "image04"),
Album(name: "图片05", image: "image05"),
Album(name: "图片06", image: "image06"),
Album(name: "图片07", image: "image07"),
Album(name: "图片08", image: "image08"),
Album(name: "图片09", image: "image09")
]

由于我们之前定义的CardView卡片视图中使用的是Image图片和Text文字。

这里我们定义两个常量动画替换它，这样我们就可以在ContentView主视图定义的值了。

let name: String
let image: String

然后，我们在ContentView主视图使用ZStack包裹CardView卡片视图，再使用ForEach循环遍历album数组所有数据。

//卡片视图
ZStack {
 ForEach(album) { album in
  CardView(name: album.name, image: album.image)
 }
}

我们发现，模拟器突然换了一张图片，这是因为我们定义的album图片数组，使用ForEach循环时是一张张遍历的，最后遍历完是album图片数组最后一张图片。

在ForEach循环中，第一张图片放在了最底下。因此，最后一张图片动画专业也就成了最上面的照片。

因此，虽然我们实现了album图片数组的遍历，但数组初始化还是存在两个手势舞教程视频慢动作问题：

1、本该是第一张图片，现在变成了最后一张。

2、现在我们只有9张图片卡片，但如果之后我们有更多的图片卡片的时候，我们是否应该手势密码为每张图片创建一个卡片视图?

album数组图片排序问题

我们一个个swifter解决，首先第一个问题，卡手势舞视频片顺序的问题。好在SwiftUI提供了zIndex修饰符来来确定ZStack中视图的顺序，zInde动画大放映x值越高，swift代码视图层级也就越高。

我们创建一个方法，来得到卡片视图的zIndex值。

//获得图片zIndex值
func isTopCard(cardView: Album) -> Bool {
 guard let index = album.firstIndex(where: { $0.id == cardView.id }) else {
  return false
      }
 return index == 0
}

上面的方法函动画片小猪佩奇数接受一个卡片视图手势密码，并找出它的索引，告诉我们这个卡片视图是不是最上面的那个。

接下来，我们在CardView卡片视图引用这个方法。

.zIndex(self.isTopCard(cardView: album) ? 1 : 0)

我们为每个卡片视图添加了zIndex修饰符，最上面的卡片我们给它赋了一个更高的zIndex值。

于是乎，我们得到了第一张图片作为顶部卡片展示。

视图层级问题

接下来，我们解决第二个问题。

如果我们以后数组指针有无数个卡片，如果要创建无数个视图显然不现实，我们是不是可以想想其他方法？

方法也很简单，其实想想，我们只需要2个卡片视图就行了，滑swiftly动一个，就显示另一个卡片视图，再滑动走一个，又回动画来我们第一个视图，只是展示的图片不一样就行了。这样不管多少图片，我们只需要2个卡片视图来回切换就可以完成我们想要的效果。

说干就干。

按照原理，我们就不需要初始化那么多图片结构，只需要前2个，当第一个卡片视图被丢掉动画片小猪佩奇，我们就添加第二个。

//创建2个卡片视图
var albums: [Album] = {
var views = [Album]()
for index in 0..<2 {
views.append(Album(name: album[index].name, image: album[index].image))
}
return views
}()

由于我们定义了一个新的数组albums，别忘了在获得图片zIndex值的方法里，要把手势语index参数读取的值要换成判断albums数组。

这样，我们就只构建了2个视图，就完成了图片数组的遍历展示。数组去重

完整代码如下：

import SwiftUI
//创建Album定义变量
struct Album: Identifiable {
var id = UUID()
var name: String
var image: String
}
//创建演示数据
var album = [
Album(name: "图片01", image: "image01"),
Album(name: "图片02", image: "image02"),
Album(name: "图片03", image: "image03"),
Album(name: "图片04", image: "image04"),
Album(name: "图片05", image: "image05"),
Album(name: "图片06", image: "image06"),
Album(name: "图片07", image: "image07"),
Album(name: "图片08", image: "image08"),
Album(name: "图片09", image: "image09")
]
//创建2个卡片视图
var albums: [Album] = {
var views = [Album]()
for index in 0..<2 {
views.append(Album(name: album[index].name, image: album[index].image))
}
return views
}()
struct ContentView: View {
var body: some View {
VStack {
            //顶部导航栏
TopBarMenu()
//卡片视图
ZStack {
ForEach(albums) { album in
CardView(name: album.name, image: album.image)
.zIndex(self.isTopCard(cardView: album) ? 1 : 0)
}
}
Spacer(minLength: 20)
            //底部导航栏
BottomBarMenu()
}
}
//获得图片zIndex值
func isTopCard(cardView: Album) -> Bool {
guard let index = albums.firstIndex(where: { $0.id == cardView.id }) else {
return false
}
return index == 0
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
// 顶部导航栏
struct TopBarMenu: View {
var body: some View {
HStack {
Image(systemName: "ellipsis.circle")
.font(.system(size: 30))
Spacer()
Image(systemName: "heart.circle")
.font(.system(size: 30))
}.padding()
}
}
//卡片视图
struct CardView: View {
let name: String
let image: String
var body: some View {
Image(image)
.resizable()
.frame(minWidth: 0, maxWidth: .infinity)
.cornerRadius(10)
.padding(.horizontal, 15)
.overlay(
VStack {
Text(name)
.font(.system(.headline, design: .rounded)).fontWeight(.bold)
.padding(.horizontal, 30)
.padding(.vertical, 10)
.background(Color.white)
.cornerRadius(5)
}
.padding([.bottom], 20), alignment: .bottom
)
}
}
// 底部导航栏
struct BottomBarMenu: View {
var body: some View {
HStack {
Image(systemName: "xmark")
.font(.system(size: 30))
.foregroundColor(.black)
Button(action: {
}) {
Text("立即选择")
.font(.system(.subheadline, design: .rounded)).bold()
.foregroundColor(.white)
.padding(.horizontal, 35)
.padding(.vertical, 15)
.background(Color.black)
.cornerRadius(10)
}.padding(.horizontal, 20)
Image(systemName: "heart")
.font(.system(size: 30))
.foregroundColor(.black)
}
}
}

未完待续

由于S动画专业wipeCard卡片滑动效手势识别果涉及的内容太多，为帮助消化，这里分为上下两章来写。

SwipeCard卡片滑动效果的使用（上swift是什么组织缩写）的部分就只完成了基础的样式和一些准备工作，涉及到的动画头像知识点很多，望花点时间消化。

快来动手试试吧！

如果数组排序本专栏对你有帮助，不妨点赞、动画评论、关注～

SwiftUI极简教程18:SwipeCard卡片滑动效果的使用（上）

TopBarMenu顶部导航栏

CardView卡片视图

BottomBarMenu底部菜单栏

交互逻辑分析

album数组图片排序问题

视图层级问题

未完待续

作者信息

推广

SwiftUI极简教程18:SwipeCard卡片滑动效果的使用（上）

TopBarMenu顶部导航栏

CardView卡片视图

BottomBarMenu底部菜单栏

交互逻辑分析

album数组图片排序问题

视图层级问题

未完待续

相关文章

记一个App卡死问题的解决过程

SwiftUI开发总结（四）再聊聊关于combine的tips

AES白盒算法详解（一）

iOS 开发之 HTTP、TCP/IP、Socket

作者信息

推广