LaunchView/启动页 的实现

news2024/9/20 20:43:50

1. 创建启动画板,LaunchScreen.storyboard 添加组件如图:

2. 项目中设置只支持竖屏,添加启动画板,如图:

3. 创建启动画面动画视图,LaunchView.swift

import SwiftUI

/// 启动视图
struct LaunchView: View {
    /// 字符串转换为字符串数组,字符串中包含单个字母组成
    @State private var loadingText: [String] = "Loading your portfolio...".map { String($0) }
    /// 是否显示文字
    @State private var showLoadingText: Bool = false
    /// 计时器
    private let timer = Timer.publish(every: 0.1, on: .main, in: .common).autoconnect()
    /// 计数
    @State private var counter: Int = 0
    /// 循环次数
    @State private var loops: Int = 0
    /// 是否显示启动 View
    @Binding var showLaunchView: Bool
    
    var body: some View {
        ZStack {
            // 背景颜色
            Color.launch.background.ignoresSafeArea()
            // 图标
            Image("logo-transparent")
                .resizable()
                .frame(width: 100, height: 100)
            // 文字
            ZStack {
                if showLoadingText {
                    HStack(spacing: 0) {
                        ForEach(loadingText.indices, id: \.self) { index in
                            Text(loadingText[index])
                                .font(.headline)
                                .fontWeight(.heavy)
                                .foregroundColor(Color.launch.accent)
                                .offset(y: counter == index ? -5 : 0)
                        }
                    }
                    .transition(AnyTransition.scale.animation(.easeIn))
                }
            }
            .offset(y: 70)
        }
        .onAppear {
            showLoadingText.toggle()
        }
        .onReceive(timer) { _ in
            // 添加弹簧动画
            withAnimation(.spring()) {
                let lastIndex = loadingText.count - 1
                if counter == lastIndex {
                    counter = 0
                    // 循环多少次
                    loops += 1
                    // 检查次数
                    if loops >= 2 {
                        showLaunchView = false
                    }
                }else{
                    counter += 1
                }
            }
        }
    }
}

struct LaunchView_Previews: PreviewProvider {
    static var previews: some View {
        LaunchView(showLaunchView: .constant(true))
    }
}

4. 启动结构体中添加版本适配、启动页、主页,SwiftfulCryptoApp.swift

import SwiftUI

@main
struct SwiftfulCryptoApp: App {
    /// 主 ViewModel
    @StateObject private var viewModel = HomeViewModel()
    /// 是否显示启动 View
    @State private var showLaunchView: Bool = true
    
    init() {
        // 修改导航栏中标题的颜色, 适配 iOS 15 导航栏背景自动更改为默认颜色
        if #available(iOS 15, *) {
            let barAppearance = UINavigationBarAppearance()
            barAppearance.configureWithOpaqueBackground()  // 重置背景和阴影颜色
            barAppearance.titleTextAttributes = [.foregroundColor: UIColor(Color.theme.accent) ]
            barAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor(Color.theme.accent)]
            barAppearance.backgroundColor = UIColor(Color.theme.background)  // 设置导航栏背景色
            // let buttonAppearance = UIBarButtonItemAppearance()
            // buttonAppearance.normal.titleTextAttributes = [
            //    .foregroundColor: UIColor(Color.theme.accent)
            // ]
            //appBarAppearance.buttonAppearance = buttonAppearance
            UINavigationBar.appearance().standardAppearance = barAppearance // 带scroll滑动的页面
            UINavigationBar.appearance().scrollEdgeAppearance = barAppearance // 常规页面
            UINavigationBar.appearance().compactAppearance = barAppearance
        }else{
            UINavigationBar.appearance().largeTitleTextAttributes = [.foregroundColor: UIColor(Color.theme.accent)]
            UINavigationBar.appearance().titleTextAttributes = [.foregroundColor: UIColor(Color.theme.accent)]
            UINavigationBar.appearance().backgroundColor = UIColor(Color.theme.background)
            UINavigationBar.appearance().tintColor = UIColor(Color.theme.accent) //前景色,按钮颜色
            //UINavigationBar.appearance().barTintColor = UIColor(Color.theme.background) //背景色,导航条背景色
            // 更改表格背景颜色
            UITableView.appearance().backgroundColor = .clear
        }
    }
    
    var body: some Scene {
        WindowGroup {
            ZStack {
                NavigationView {
                    HomeView()
                    //.navigationBarHidden(true)
                }
                // 适配 iPad 导航栏
                .navigationViewStyle(.stack)
                // 环境对象中添加 view model,便于每个 View 都能够去访问
                .environmentObject(viewModel)
                .accentColor(Color.theme.accent)
                // 防止 Z 堆栈跳转时产生混乱问题
                ZStack {
                    // 是否显示启动 View
                    if showLaunchView {
                        LaunchView(showLaunchView: $showLaunchView)
                        //.transition(.move(edge: .leading))
                        // transition: 过渡动画 .scale(scale: 0)
                            .transition(.move(edge: .leading))
                    }
                }
                .zIndex(2.0)
            }
        }
    }
}

5. 效果图:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1080803.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

第二章——古典密码学及算法实现

凯撒加密 凯撒加密算法实现: # 凯撒密码加密函数 def caesar_encrypt():string [a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u,v, w, x, y, z]# 密文列表cipher_text_list []cipher int(input("请输入你的密钥:"))plain_text in…

基于ChatGPT+词向量/词嵌入实现相似商品推荐系统

最近一个项目有个业务场景是相似商品推荐,给一个商品描述(比如 WIENER A/B 7IN 5/LB FZN ),系统给出商品库中最相似的TOP 5种商品,这种单纯的推荐系统用词向量就可以实现,不过,这个项目特点是商品库巨大,有…

SQL中for xml path 的用法

1. 用法 是一种将查询结果转换为 XML 格式的方法。它可以将查询结果中的每一行转换为一个 XML 元素,并且可以指定元素的名称和属性。 2. 应用示例 有一张学生选修课程的表,如下图所示 希望整合成下图所示效果 --建表 if object_id(StudentInfo,u) is…

webrtc用clang编译支持h264,支持msvc调用库

webrtc遇到困扰: 如果msvc编译,ffmpeg编译失败,需要替换ffmpeg库。如果用clang编译,vs或qt调用dll又存在崩溃。 经过反复尝试找到解决方法: 一、编译 1、编译参数 //我得环境配置 set DEPOT_TOOLS_UPDATE0 set DEP…

解决linux终端启动后不能自动加载环境变量配置(个人配置文件)详解

文章目录 设备环境问题阐述解决方法 设备环境 WSL2 Ubuntu-20.04 本教程适配所有linux,不管你是虚拟机还是WSL或者其他的平台。 问题阐述 由于专业课的要求,需要在Linux中新建一个用户,然后转到这个用户来完成专业课的各种实践要求。有可…

HttpServletRequest对象与RequestDispatcher对象

一、HttpServletRequest对象 1.介绍 在Servlet API中,定义了一个HttpServletRequest接口,它继承自ServletRequest接口,专门用来封装HTTP请求消息。由于HTTP请求消息分为请求行、请求消息头和请求消息体三部分,因此,在…

Android免杀小结

目录 msfvenom 自动生成 自带免杀 工具免杀 Thefatrat backdoor-apk old-fatrat msfVenom嵌入式方法 venom 工具小记 加壳 源码免杀 加壳 源码混淆 数据通信 启动和运行方式修改 对抗反编译 反编译工具崩溃 ZIP文件格式对抗 ZIP通用位伪加密 AndroidManife…

暴涨100万粉仅用一个月,B站内容趋势前线洞察

- 导语 在这个9月,B站涌现多位黑马UP主,有的UP主自入驻B站以来,一个月的时间就涨粉百万晋升为头部UP主,有的UP主因内容受到B站百万年轻人的追捧,展现账号爆发力。 接下来,飞瓜数据(B站版&…

智慧工地:助力数字建造、智慧建造、安全建造、绿色建造

智慧工地管理系统融合计算机技术、物联网、视频处理、大数据、云计算等,为工程项目管理提供先进的技术手段,构建施工现场智能监控系统,有效弥补传统监理中的缺陷,对人、机、料、法、环境的管理由原来的被动监督变成全方位的主动管…

将 mysql 数据迁移到 clickhouse (最新版)

一、前驱知识 已经在mysql中插入了海量的数据了,这个时候mysql 承载不了这么大的数据,并且数据只需要查询,修改和删除非常少,并且不需要支持事务,这个时候需要换一个底层存储,这里选用的是 clickhouse 来进…

智能视频分析系统AI智能分析网关V3触发告警图片不显示该如何解决?

AI智能分析网关V3包含有20多种算法,包括人脸、人体、车辆、车牌、行为分析、烟火、入侵、聚集、安全帽、反光衣等等,可应用在安全生产、通用园区、智慧食安、智慧城管、智慧煤矿等场景中。将网关硬件结合我们的视频监控系统EasyCVR一起使用,可…

vue3插件——vue-web-screen-shot——实现页面截图功能

最近在看前同事发我的vue3框架时,发现他们有个功能是要实现页面截图功能。 vue3插件——vue-web-screen-shot——实现页面截图功能 效果图如下:1.操作步骤1.1在项目中添加vvue-web-screen-shot组件1.2在项目入口文件导入组件——main.ts1.3在需要使用的页…

对话天润云CEO吴强,未来所有企业都要用AI重构一遍 | AIGC入局者栏目

近日,铅笔道联合知乎,与天润云(又称“天润融通”)创始人兼CEO吴强先生深度交流,大模型如何提升客户联络效率以帮助企业完成变革。 吴强认为:“丰富、专业的语料决定了大模型的能力,企业生产过程…

小程序, 多选项

小程序, 多选项 <view class"my-filter-btnwrap"><block wx:for"{{archiveList}}" wx:key"index"><view class"my-filter-btnitem text-ellipsis {{item.checked ? active : }}" data-index"{{index}}" wx…

Vuex的同步存值与取值及异步请求

前言 1.概念 Vuex是一个用于管理Vue.js应用程序中状态的状态管理模式和库。Vue.js是一个流行的JavaScript框架&#xff0c;用于构建用户界面&#xff0c;而Vuex则专门用于管理应用程序的状态&#xff0c;以确保状态在整个应用程序中保持一致和可维护。 2.Vuex的特点&#xf…

uniapp-vue3微信小程序实现全局分享

uniapp-vue3微信小程序实现全局分享 文章目录 uniapp-vue3微信小程序实现全局分享微信小程序官方文档的分享说明onShareAppMessage(Object object)onShareTimeline() uniapp 官方文档的分享说明onShareAppMessage(OBJECT) 实现全局分享代码结构如下share.js文件内容main.js注意…

XML是不是主要用做配置文件?

2023年10月11日&#xff0c;周三下午 这几天发现tomcat的配置文件主要是用XML文件来写的&#xff0c; 于是就有了这个问题。 是的,XML非常适合用来做配置文件。 XML作为配置文件的主要优点: 可读性强。XML使用标签结构组织数据,内容清晰易懂。跨语言和跨平台。XML作为纯文本…

一站式新零售管理系统提供商,数字化收银系统与连锁门店运营优化

在数字化时代&#xff0c;连锁超市行业正面临巨大的转型压力。消费者对购物体验的需求不断提升&#xff0c;线上线下购物的融合趋势明显&#xff0c;同时物流、供应链和库存管理也变得越来越复杂。面对日益激烈的竞争和消费者需求的变化&#xff0c;连锁超市亟需通过数字化手段…

Linux:I/O 5种模型

图片来源&#xff1a;https://pdai.tech/md/java/io/java-io-model.html

手机APP也可以学习Sui啦,通过EasyA开启你的学习之旅

Sui基金会与EasyA合作&#xff0c;开发了一门面向初学者的Sui课程。这一适用于Android和iOS移动端的学习体验&#xff0c;是进入更广泛的Sui社区和生态系统的入口。在这门课程中&#xff0c;学习者将以有趣和互动的方式获得对Sui的基本了解&#xff0c;最终能够在测试网络上部署…