携手创作，共同成长！这是我参加「日新计划 8 月更文挑战」的第19天，点击查看活动详情。
在之前的章节中，完结了一个根本设置页面中的个人信息、账号绑定、通用设置的详情页。
在一章节，咱们来完结简历办理的页面建立。
那么这一章节，咱们来完结版别更新的弹窗，用于手动取得更新。
本章相关项目
无人问津的设置页面，怎么做到小而精美？
颜值即正义，运用SwiftUI建立个人信息、账号绑定、通用设置详情页
颜值即正义，运用SwiftUI建立简历办理详情页
作用预览
咱们先来看看最终的作用图。示例：
逻辑整理
咱们来整理了根本的交互逻辑，当咱们在设置页面点击“版别更新”的时分，体系发送恳求取得最新版别号，再由本地版别号进行比照，若是当时版别号低于恳求回来的版别号信息，则翻开体系更新弹窗，询问用户是否进行晋级。
在版别更新弹窗中，提供“当即更新”和“封闭”2个按钮，点击“当即更新”，则跳转到AppStore进行更新；点击封闭，则封闭弹窗。
值得注意的是，当咱们弹窗翻开时，背景需求添加一个蒙层来突出弹窗信息，当封闭弹窗时，则蒙层对应消失。
逻辑整理完结后，咱们来完结款式部分的建立。
页面蒙层
页面的蒙层咱们能够看作一个白色的视图，只是它的透明度只有本来的一半。示例：
// MARK: 蒙层
struct MaskView: View {
var bgColor: Color
var body: some View {
VStack {
Spacer()
}
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
.background(bgColor)
.edgesIgnoringSafeArea(.all)
.opacity(0.5)
}
}
蒙层是当咱们点击“版别更新”按钮时才翻开，因而咱们需求声明一个变量进行切换显隐，示例：
@State private var showMaskView = false
咱们将蒙层加到页面中，当咱们showMaskView状况为true时，显现蒙层。示例：
// 翻开蒙层
if showMaskView {
MaskView(bgColor: .black)
}
点击触发的事情咱们也加到本来的设置项中，示例：
Button(action: {
self.showMaskView = true
}) {
listItemView(itemImage: "icloud.and.arrow.down", itemName: "版别更新", itemContent: "Version 6.2.8")
}
不错不错，点击“版别更新”翻开蒙层的交互咱们完结了。
版别更新弹窗
接下来，咱们来制作更新弹窗。根据图例，咱们能够看到“版别更新”弹窗由一个Image图片，两段Text文字，一个“当即更新”按钮，一个“封闭”按钮组成，如下图所示：
我么先来制作款式部分，咱们创建一个新的视图CheckForUpdatesView，然后完结以下款式：
// MARK: 检查更新
struct CheckForUpdatesView: View {
var body: some View {
VStack(spacing: 32) {
VStack(spacing: 10) {
Image("update")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 300)
// 阐明文字
Text("软件更新提示Version6.2.9")
.font(.system(size: 17))
.foregroundColor(.black)
Text("基础功用优化，抢先体会。")
.font(.system(size: 14))
.foregroundColor(.gray)
Spacer()
// 更新操作
Button(action: {
}) {
Text("当即更新")
.font(.system(size: 17))
.fontWeight(.bold)
.frame(minWidth: 0, maxWidth: .infinity)
.padding()
.foregroundColor(.white)
.background(Color(red: 88 / 255, green: 224 / 255, blue: 133 / 255))
.cornerRadius(30)
.padding(.horizontal, 20)
}
}
.padding(.bottom, 40)
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 350)
.background(.white)
.cornerRadius(8)
.padding(.horizontal, 48)
// 封闭按钮
Image(systemName: "xmark.circle.fill")
.font(.system(size: 32))
.foregroundColor(.black)
.opacity(0.5)
}
}
}
款式部分没啥好说的了，咱们运用事前导入的图片作为展现的Image，然后运用VStack纵向排布两段文字。再制作了2个按钮：一个文字按钮，一个图标按钮。
当咱们点击封闭按钮时，需求封闭弹窗，这里咱们需求绑定回本来在ContentView声明的变量，因而咱们能够运用@Binding进行双向绑定，示例：
@Binding var showMaskView: Bool
然后在点击封闭按钮时，切换showMaskView状况，示例：
// 封闭按钮
Image(systemName: "xmark.circle.fill")
.font(.system(size: 32))
.foregroundColor(.black)
.opacity(0.5)
.onTapGesture {
self.showMaskView = false
}
就此，咱们的弹窗部分就完结了。
最终咱们把新视图CheckForUpdatesView加到主页面中，由于弹窗和蒙层一同呈现，因而需求放在同一个判别逻辑里。示例：
// 翻开蒙层
if showMaskView {
MaskView(bgColor: .black)
CheckForUpdatesView(showMaskView: $showMaskView)
}
完结后，咱们来预览下最终作用。
项目预览
祝贺你，完结了本章的全部内容！
快来着手试试吧。
假如本专栏对你有协助，无妨点赞、谈论、重视～
