颜值即正义,使用SwiftUI搭建版本更新弹窗

简介: 颜值即正义,使用SwiftUI搭建版本更新弹窗

颜值即正义,使用SwiftUI搭建版本更新弹窗

效果预览

我们先来看看最终的效果图。示例:

image.png

逻辑梳理

我们来梳理了基本的交互逻辑,当我们在设置页面点击“版本更新”的时候,系统发送请求获得最新版本号,再由本地版本号进行对比,若是当前版本号低于请求回来的版本号信息,则打开系统更新弹窗,询问用户是否进行升级。

在版本更新弹窗中,提供“立即更新”和“关闭”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文字,一个“立即更新”按钮,一个“关闭”按钮组成,如下图所示:

image.png

我么先来绘制样式部分,我们创建一个新的视图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)
}

完成后,我们来预览下最终效果。

项目预览

恭喜你,完成了本章的全部内容!

快来动手试试吧。


相关文章
|
3月前
|
缓存 前端开发 Android开发
安卓开发中的自定义视图:从零到英雄
【10月更文挑战第42天】 在安卓的世界里,自定义视图是一块画布,让开发者能够绘制出独一无二的界面体验。本文将带你走进自定义视图的大门,通过深入浅出的方式,让你从零基础到能够独立设计并实现复杂的自定义组件。我们将探索自定义视图的核心概念、实现步骤,以及如何优化你的视图以提高性能和兼容性。准备好了吗?让我们开始这段创造性的旅程吧!
56 1
|
9月前
|
前端开发
前端知识笔记(二十)———简易弹窗制作
前端知识笔记(二十)———简易弹窗制作
94 0
|
9月前
|
人工智能 Linux C#
八宫格丨九宫格丨淘金镇丨潮玩元宇宙大逃杀游戏系统开发指南步骤及稳定版
uSurvival - the new Multiplayer Survival Asset from the creator of uMMORPG.
颜值即正义,使用SwiftUI搭建简历管理详情页
颜值即正义,使用SwiftUI搭建简历管理详情页
83 0
|
数据安全/隐私保护 计算机视觉
推荐五款实用的良心软件,无广告无弹窗
分享是一种神奇的东西,它使快乐增大,它使悲伤减小。
173 0
推荐五款实用的良心软件,无广告无弹窗
|
JavaScript Go CDN
君子不玩物丧志,亦常以借物调心,网站集成二次元网页小组件(widget)石蒜模拟器,聊以赏玩
传世经典《菜根谭》中有言曰:“徜徉于山林泉石之间,而尘心渐息;夷犹于诗书图画之内,而俗气潜消。故君子虽不玩物丧志,亦常借物调心。”意思是,徜徉在林泉山石之间,能够摒弃杂念,留意诗词歌画之中,可以尽弃俗见。所以说君子虽然不会玩物丧志,也常常要借一些优雅的小物件来调理情绪,二次元网页小组件(widget)就是这样的小物件,功能上无甚大观,却可以博君一晒。
君子不玩物丧志,亦常以借物调心,网站集成二次元网页小组件(widget)石蒜模拟器,聊以赏玩
|
Linux 开发工具 开发者
猿如意中的【取色器】效率工具详情介绍
猿如意中的【取色器】效率工具详情介绍
321 0
猿如意中的【取色器】效率工具详情介绍
|
存储 文字识别 自然语言处理
好看、好用、强大的手写笔记软件综合评测:Notability、GoodNotes、MarginNote、随手写、Notes Writers、CollaNote、Prodrafts、Noteshelf、FlowUs、OneNote、苹果备忘录
与普通的笔记编辑器相比,手写笔记软件相对少一些。其中,比较出名的并不多。下面介绍一些比较主流、备受好评的,兼具有好看、好用、强大等特点的手写笔记软件。其中,首先介绍传统被忽略的两款笔记软件 OneNote 和 苹果备忘录。随后测评了包括 Notability、GoodNotes、MarginNote、随手写、Notes Writers、CollaNote、Prodrafts、Noteshelf、FlowUs.
1856 0
好看、好用、强大的手写笔记软件综合评测:Notability、GoodNotes、MarginNote、随手写、Notes Writers、CollaNote、Prodrafts、Noteshelf、FlowUs、OneNote、苹果备忘录
|
前端开发 iOS开发
SwiftUI直通车系列(4)—— 处理用户交互
SwiftUI直通车系列(4)—— 处理用户交互
272 0
SwiftUI直通车系列(4)—— 处理用户交互

热门文章

最新文章