携手创造，一起成长！这是我参加「日新方案 8 月更文挑战」的第12天，点击检查活动概况。

在本章中，你将学会运用SwiftUI建立一个电子相册。

项目布景

每到七夕情人节、纪念日等节日，身为程序员的咱们总是不知道该送什么礼物表达心意，毕竟满脑子装的都是代码。

那咱们能不能用代码做一个礼物送给心爱的那个她呢？

即能表达心意，又刚好碰上自己的专业范畴。

说干就干。

项目建立

首要，创立一个新的SwiftUI项目，命名为ElectronicAlbum。

谁说程序员不懂浪漫，教你使用SwiftUI搭建一个电子相册送给她吧～

资料导入

首要，咱们需求导入一堆图片作为展现的资料。咱们在Assets.xcassets文件中导入一批图片，示例：

谁说程序员不懂浪漫，教你使用SwiftUI搭建一个电子相册送给她吧～

数据模型

资料导入完结后，接下来咱们创立数据模型，咱们新增一个Swift文件，命名为Model.swift。

import SwiftUI
struct Model:Identifiable {
var id = UUID()
var imageName: String
}
//示例数据
var models = (1...6).map { Model(imageName:"\($0)") }

上述代码中，咱们声明晰一个结构体Model，遵循Identifiable协议。

在Model结构体中，咱们声明晰一个id作为仅有标识符，然后声明晰一个变量imageName用来关联图片。

在之前咱们现已导入了一批图片，而且图片名称为1～6，因而咱们能够声明一个数组models，经过map创立示例数据。

页面款式

咱们回到ContentView.swift文件，创立一个新视图来展现图片。示例：

// 图片视图
func imageCardView() -> some View {
ForEach(models) { item in
Image(item.imageName)
.resizable()
.aspectRatio(contentMode: .fit)
.cornerRadius(10)
.padding(.horizontal)
.shadow(color: .pink, radius: 5, x: 0, y: 0)
}
}

谁说程序员不懂浪漫，教你使用SwiftUI搭建一个电子相册送给她吧～

上述代码中，咱们创立了一个新视图imageCardView。

在imageCardView视图中，咱们运用ForEach循环遍历models数组中的数据，并赋值给Image图片。

图片款式部分，咱们坚持图片原有aspectRatio宽高比，加个cornerRadius圆角，设置横向padding边距，最终加了加了一个粉色的边框。

根底交互

页面款式完结后，咱们需求左右翻滚图片视图，能够运用到TabView，示例：

var body: some View {
TabView {
imageCardView()
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
.background(Color(red: 254 / 255, green: 207 / 255, blue: 238 / 255)).edgesIgnoringSafeArea(.all)
}

上述代码中，咱们在ContentView视图中运用TabView构建了一个轮博视图。

咱们设置了PageTabViewStyle款式为躲藏轮播小圆点，然后设置了布景色彩为粉色。

咱们预览下作用：

交互进阶

根底交互咱们完结根底的轮播图款式，下一步为了让交互更加优雅些，咱们能够尝试运用参加些3D切换的作用。

3D切换作用咱们需求运用到rotation3DEffect修饰符，而由于rotation3DEffect旋转视点接纳Double类型的数值，但咱们视图偏移修饰符接纳的数值却是CGFloat类型，因而咱们首要声明一个方法进行类型转换和设置旋转交互的视点。

func getAngle(xOffset: CGFloat) -> Double {
let tempAngle = xOffset / (UIScreen.main.bounds.width / 2)
let rotationDegree: CGFloat = 30
return Double(tempAngle * rotationDegree)
}

上述代码中，咱们声明晰一个方法getAngle，接纳一个CGFloat类型的参数xOffset，回来一个Double类型的参数。

由于咱们需求把每个视图展现在中心，因而视图切换视点tempAngle为屏幕一半来核算视点，然后咱们供给旋转视点为30度，最终回来核算好的旋转视点。

咱们将rotation3DEffect修饰符加到视图中。

// 图片视图
func imageCardView() -> some View {
ForEach(models) { item in
GeometryReader { innerView in
Image(item.imageName)
.resizable()
.aspectRatio(contentMode: .fit)
.cornerRadius(10)
.padding(.horizontal)
.shadow(color: .pink, radius: 5, x: 0, y: 0)
.frame(width: innerView.frame(in: .global).width, height: innerView.frame(in: .global).height)
.rotation3DEffect(Angle(degrees: getAngle(xOffset: innerView.frame(in: .global).minX)),
axis: (x: 0.0, y: 1.0, z: 0.0),
anchor: innerView.frame(in: .global).minX > 0 ? .leading : .trailing,
perspective: 2.5
)
}
}
}

咱们运用GeometryReader几何视图来确定图片翻滚时的图片的大小，然后运用frame修饰符调整其翻滚时的图片大小改变，最终运用rotation3DEffect修饰符，设置翻滚时的视点改变。

项目预览

祝贺你，完结了整个项目的全部内容！

快来动手试试吧。

如果本专栏对你有协助，无妨点赞、谈论、关注～