AsyncImage, BackgroundMaterials, TextSelection, ButtonStyles 的使用

news2024/11/24 20:05:34

1. AsyncImage 异步加载图片

  1.1 实现

/*
 case empty -> No image is loaded.
 case success(Image) -> An image succesfully loaded.
 case failure(Error) -> An image failed to load with an error.
 */
/// iOS 15 开始的 API  新特性示例
/// 异步加载图片
struct AsyncImageBoocamp: View {
    let url = URL(string: "https://picsum.photos/400")
    
    var body: some View {
        // asyncImage1
         asyncImage2
    }
    
    // 第二种方式
    var asyncImage2: some View{
        AsyncImage(url: url) { phase in
            switch phase{
            case .empty:
                ProgressView()
            case .success(let returnedImage):
                returnedImage
                    .resizable()
                    .scaledToFit()
                    .frame(width: 200, height: 200)
                    .cornerRadius(20)
            case .failure:
                Image(systemName: "questionmark")
                    .font(.headline)
            default:
                Image(systemName: "questionmark")
                    .font(.headline)
            }
        }
    }
    
    // 第一种方式
    var asyncImage1: some View{
        AsyncImage(url: url, content: { returnedImage in
            returnedImage
                .resizable()
                .scaledToFit()
                .frame(width: 200, height: 200)
                .cornerRadius(20)
        }, placeholder: {
            ProgressView()
        })
    }
}

  1.2 效果图:

    

2. BackgroundMaterials 背景模版的使用

  2.1 实现

/// 背景模版
struct BackgroundMaterialsBootcamp: View {
    var body: some View {
        VStack{
            Spacer()
            VStack{
               RoundedRectangle(cornerRadius: 4)
                    .frame(width: 50, height: 4)
                    .padding()
                Spacer()
            }
            .frame(height: 350)
            .frame(maxWidth: .infinity)
            .background(.ultraThinMaterial)
            .cornerRadius(30)
        }
        .ignoresSafeArea()
        .background(
           Image("therock")
        )
    }
}

  2.2 效果图:

3. TextSelection 文本选择,复制与分享

  3.1 实现

/// 文本选择
struct TextSelectionBootcamp: View {
    var body: some View {
       Text("Hello, World!")
            .textSelection(.enabled)
    }
}

  3.2 效果图:

4. ButtonStyles 按钮的样式

  4.1 实现

/// 按钮样式
struct ButtonStylesBootcamp: View {
    var body: some View {
        VStack{
            Button {
            } label: {
                Text("Button title")
                    .frame(height: 55)
                    .frame(maxWidth: .infinity)
            }
            .buttonStyle(.borderedProminent)
            .buttonBorderShape(.roundedRectangle(radius: 20))
            .controlSize(.large)
            
            Button("Button Title") {
            }
            .frame(height: 55)
            .frame(maxWidth: .infinity)
            //.buttonStyle(.plain)
            .buttonStyle(.borderedProminent)
            .controlSize(.large)
            
            Button("Button title") {
            }
            .frame(height: 55)
            .frame(maxWidth: .infinity)
            //.buttonStyle(.bordered)
            .buttonStyle(.borderedProminent)
            .controlSize(.regular)
            
            Button("Button title") {
            }
            .frame(height: 55)
            .frame(maxWidth: .infinity)
            .buttonStyle(.borderedProminent)
            .controlSize(.small)
            
            Button("Button title") {
            }
            .frame(height: 55)
            .frame(maxWidth: .infinity)
            //.buttonStyle(.borderless)
            .buttonStyle(.borderedProminent)
            .controlSize(.mini)
        }
        .padding()
    }
}

  4.2 效果图:

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

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

相关文章

Ae 效果:CC Plastic

风格化/CC Plastic Stylize/CC Plastic CC Plastic(CC 塑料)效果用于创建具有塑料质感的图像或视频效果,它模拟了塑料材质的外观特性,包括光照反射、表面凹凸以及光泽效果等。 ◆ ◆ ◆ 效果属性说明 Surface Bump 表面凹凸 通过…

IoT 场景下 TDengine 与老牌时序数据库怎么选?看看这份TSBS报告

上周一,TDengine 正式发布了 IoT 场景下基于 TSBS 的时序数据库(Time Series Database,TSDB)性能基准测试报告。该报告模拟虚拟货运公司车队中一组卡车的时序数据,预设了五种卡车规模场景,在相同的 AWS 云环…

[Lesson 01] TiDB数据库架构概述

目录 一 章节目标 二 TiDB 体系结构 1 TiDB Server 2.1 TiKV 2.2 TiFlash 3 PD 参考 一 章节目标 理解TiDB数据库整体架构了解TiDB Server TiKV tiFlash 和 PD的主要功能 二 TiDB 体系结构 了解这些体系结构是如何实现TiDB的核心功能的 1 TiDB Server TiDB Serve…

记录--你知道Vue中的Scoped css原理么?

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 追忆Scoped 偶然想起了一次面试,二面整体都聊完了,该做的算法题都做出来了,该背的八股文也背的差不多了,面试官频频点头,似乎对我的基础和项…

云计算的学习(四)

四、云计算中的存储基础知识 1.云计算虚拟化中的存储架构 ①虚拟化存储 在虚拟化存储架构中,最底层为物理磁盘。 底层的硬件组成存储池,存储池分为NAS存储和SAN存储;NAS存储需要文件系统;SAN存储需要对存储池进行逻辑划分产生逻…

【VSCode | 使用技巧集锦】中文插件突然失效、配置单个工程(工作区)编码

目录 ✨技巧一:中文插件失效的解决办法✨技巧二:配置单个工程(工作区)编码 ✨技巧一:中文插件失效的解决办法 问题描述:VSCode之前安装了中文插件,可以正常汉化,用了一段时间都没问题,今天打开v…

springboot+webscoket通信功能

1. 背景 项目上需要对某个页面的设计功能(低代码)进行最简单的多人协同,有以下需求点: (1)第一个进入该设计页面的人给编辑权限,后进入的所有人给在线(可申请编辑)权限 …

使用MQTTX和前端vue进行通讯

需求:根据后端给的接口,前端实现消息订阅和消息加密连接操作,不走后端直接和硬件设备进行操作 1.下载mqttx 官网链接:MQTTX: Your All-in-one MQTT Client Toolbox 根据自己电脑选择不同的操作系统,默认下载后是英文…

金鸣表格识别中何时应勾选“手写”选项?

在金鸣表格文字识别系统的表格识别模块中,有个“手写”的复选框可供用户选择性使用。这里的“手写”是手写识别的简称,设置此项的目的是为了让用户更准确地识别手写的表格图片中的文字。为何要单独设置这个选项而不是由程序全自动地进行处理呢&#xff1…

【GitOps系列】K8s极简实战

文章目录 示例应用介绍部署应用到k8s 如何使用命名空间隔离团队及应用环境?如何为业务选择最适合的工作负载类型?如何解决服务发现问题?如何迁移应用配置?如何将集群的业务服务暴露外网访问?如何保障业务资源需求和自动…

JavaWeb(3)——HTML、CSS、JS 快速入门

一、JavaScript 运算符 • 赋值运算符( ) 赋值运算符执行过程? 将等号右边的值赋予给左边, 要求左边必须是一个容器 出现是为了简化代码, 比如让 let age 18 ,age 加 2 怎么写呢 let age 18age 2console.log(age)age * 2con…

html+JavaScript实现一个好看的颜色码查询器,支持查询、转换、颜色选择器和颜色码对照表

前言 相信大家平时工作的时候应该会经常用到颜色码吧,比如说想找个好看的颜色,或者有个颜色码但是不知道这个码是什么颜色的,这个时候我们就可以用颜色码对照表或者颜色码查询来查看了。 当然也可以用截图软件或者取色器或者PS来查看&#…

如何有效检测、识别和管理 Terraform 配置漂移?

作者|Krishnadutt Panchagnula 翻译|Seal软件 链接|https://betterprogramming.pub/detecting-identifying-and-managing-terraform-state-drift-997366a74537 在理想的 IaC 世界中,我们所有的基础设施实现和更新都是通过将更新的…

【高并发】高并发架构实战:从需求分析到系统设计

Yan-英杰的主页 悟已往之不谏 知来者之可追 C程序员,2024届电子信息研究生 很多软件工程师的职业规划是成为架构师,但是要成为架构师很多时候要求先有架构设计经验,而不做架构师又怎么会有架构设计经验呢?那么要如何获得架构设…

Cesium 测距、测面功能实现

参考博主 功能代码参考 新需求:点击测距,此时画线逻辑已生成到运行缓存中,如果 用户误触测距,想撤销,如何操作? 代码: // 重置画图resetDraw(){// 清除可能会用到的监听事件if (this.handle…

操作系统17:外存组织方式和文件存储管理

目录 1、外存的组织方式 (1)连续组织方式 (2)链接组织方式 2.1 - 隐式链接 2.2 - 显式链接 (3)索引组织方式 3.1 - 单级索引组织方式 3.2 - 多级索引组织方式 3.3 - 增量式索引组织方式 2、文件存…

【操作系统】几种基本页面置换算法的基本思想和流程图

目录 一、概述二、最佳置换算法(OPT)三、先进先出置换算法(FIFO)四、最近最久未使用置换算法(LRU)五、三种页面置换算法优缺点对比六、运行结果七、总结 一、概述 在地址映射过程中,若在页面中发…

Linux 发行版 Gentoo 存在重大漏洞

导读网络安全公司 SonarSource 在日前研究中发现,Gentoo Linux 发行版中存在漏洞 CVE-2023-28424,黑客可以利用该漏洞进行 SQL 注入攻击。 研究人员从 GentooLinux 的 Soko 搜索组件中找到了这个漏洞。该漏洞的 CVSS 风险评分为 9.1,属于特别…

6款开源中文OCR使用介绍(亲测效果)

文章目录 前言开源ocr项目1. Paddle OCR(推荐指数:★★★★★)1.1 简介1.2 使用1.3 优缺点 2. CnOCR(推荐指数:★★★★★)2.1 简介2.2 使用2.3 优缺点 3. chinese_lite OCR(推荐指数&#xff1…

保障AI时代的图像安全:揭示解决虚假图片危机的三种策略

写在前面从 P 图到假图批量生成,AI 图像安全成可信 AI 重点关注方向三大技术:提前布局,合合信息 AI 图像安全技术助力行业健康发展✔ AI 图像篡改检测技术✔ 生成式图像鉴别技术✔ OCR 对抗攻击技术 一项标准:与中国信通院等权威机…