Xcode 14.3 和 iOS 16.4 为 SwiftUI 带来了哪些新功能？

news2024/9/28 19:23:57

在这里插入图片描述

0. 概览

今年年初，Apple 推出了最新的 Xcode 14.3 以及对应的 iOS 16.4 。

与此同时，它们对目前最新的 SwiftUI 4.0 也添加了一些新功能：

  • sheet 弹窗后部视图（Interact with a view Behind a sheet）可交互；
  • sheet 弹窗背景透明化；
  • 调整 sheet 弹窗顶角弧度；
  • 控制弹窗内滚动手势优先级；
  • 定制紧密（compact-size ）尺寸下 sheet 弹窗大小；
  • Xcode 预览（Preview）模式下对调试输出的支持；

让我们依次来了解一下它们吧。

Let‘s go！！！😉

1. sheet 后部视图可交互

在 iOS 16.4 之前，SwiftUI 中 sheet 弹窗后，如果点击其后部的视图会导致弹窗立即被关闭，从而无法与弹窗后部的视图进行交互。

从 iOS 16.4 开始，我们可以为 sheet 弹窗应用 presentationBackgroundInteraction() 方法，以达到不关闭弹窗而与后部视图交互之目的：

@available(iOS 16.4, *)
struct ContentView: View {
    @State private var isPresented = false
    @State private var number = 0
    
    var body: some View {
        ZStack(alignment: .top) {
            Rectangle()
                .fill(Gradient(colors: [.red,.green]).opacity(0.66))
                .ignoresSafeArea()
            Button("Sheet") {
                isPresented = true
            }
            .buttonStyle(.borderedProminent)
            .padding()
            
            VStack {
                Button("产生随机数: \(number)"){
                    number = Int.random(in: 0..<10000000)
                }
                .foregroundColor(.white)
                .font(.title.weight(.black))
            }.padding(.top, 200)
        }
        .sheet(isPresented: $isPresented) {
            Text("大熊猫侯佩 @ csdn")
                .font(.headline)
                .presentationDetents([.height(120), .medium, .large])
                // 开启后部视图交互
                .presentationBackgroundInteraction(.enabled)
        }
    }
}

在这里插入图片描述

2. sheet 背景透明化

从 iOS 16.4 开始，我们可以为 sheet 弹窗选择透明样式，更好的美化弹出窗口的显示效果。

如下代码所示，我们在 sheet 弹窗上应用了 presentationBackground(_: ) 修改器以实现透明磨砂效果：

@available(iOS 16.4, *)
struct ContentView: View {
    @State private var isSheet = false
    @State private var isSheetTransparency = false
    
    var body: some View {
        ZStack(alignment: .top) {
            Rectangle()
                .fill(Gradient(colors: [.red,.green]).opacity(0.66))
                .ignoresSafeArea()
            
            HStack {
                Button("弹出") {
                    isSheet = true
                }
                .sheet(isPresented: $isSheet) {
                    Text("大熊猫侯佩 @ csdn")
                        .font(.headline)
                        .presentationDetents([.height(120), .medium, .large])
                        // 或使用 .background 调用 presentationBackground() 方法效果相同
                        //.presentationBackground(.background)
                }
                
                Spacer()
                
                Button("透明弹出") {
                    isSheetTransparency = true
                }
                .sheet(isPresented: $isSheetTransparency) {
                    Text("大熊猫侯佩 @ csdn")
                        .font(.headline)
                        .presentationDetents([.height(120), .medium, .large])
                        .presentationBackground(.ultraThinMaterial)
                }
            }
            .font(.headline)
            .buttonStyle(.borderedProminent)
            .padding(.top, 200)
            .padding(.horizontal, 50)
        }
    }
}

在这里插入图片描述

3. sheet 顶部弧度调整

感觉 sheet 弹窗顶角生硬无弧度的小伙伴们有福了，从 iOS 16.4 开始，SwiftUI 开始支持调整 sheet 弹出窗口顶角的弧度了。

我们可以使用 .presentationCornerRadius() 修改器来实现这一功能：

@available(iOS 16.4, *)
struct ContentView: View {
    @State private var isSheet = false
    @State private var isSheetRadius = false
    
    var body: some View {
        ZStack(alignment: .top) {
            Rectangle()
                .fill(Gradient(colors: [.red,.green]).opacity(0.66))
                .ignoresSafeArea()
            
            HStack {
                Button("弹出") {
                    isSheet = true
                }
                .sheet(isPresented: $isSheet) {
                    Text("大熊猫侯佩 @ csdn")
                        .font(.headline)
                        .presentationDetents(.height(120), .medium, .large])
                }
                
                Spacer()
                
                Button("顶角圆润弧度弹出") {
                    isSheetRadius = true
                }
                .sheet(isPresented: $isSheetRadius) {
                    Text("大熊猫侯佩 @ csdn")
                        .font(.headline)
                        .presentationDetents([.height(120), .medium, .large])
                        .presentationCornerRadius(30.0)
                }
            }
            .font(.headline)
            .buttonStyle(.borderedProminent)
            .padding(.top, 200)
            .padding(.horizontal, 50)
        }
    }
}

在这里插入图片描述

4. sheet 滚动手势优先级调整

在 iOS 16.4 之前，如果我们 sheet 尺寸可变弹窗中包含滚动视图（比如 List，ScrollView 等），当用户在弹窗中滚动将会首先引起弹窗尺寸的改变，而不是其滚动内容的改变。

在 iOS 16.4 之后，我们可以调整 sheet 弹窗滚动手势优先级，以确保首先滚动其内容而不是改变弹窗尺寸。

这是通过 .presentationContentInteraction(.scrolls) 方法来实现的：

@available(iOS 16.4, *)
struct ContentView: View {
    @State private var isSheet = false
    @State private var isSheetScrollable = false
    
    var body: some View {
        
        ZStack(alignment: .top) {
            Rectangle()
                .fill(Gradient(colors: [.red,.green]).opacity(0.66))
                .ignoresSafeArea()
            
            
            HStack {
                Button("弹出") {
                    isSheet = true
                }
                .sheet(isPresented: $isSheet) {
                    VStack(spacing: 16) {
                        Text("大熊猫侯佩 @ csdn")
                            .font(.headline)
                        List(0..<50, id: \.self){ i in
                            Text("Item \(i)")
                                .font(.subheadline)
                        }
                        .listStyle(.plain)
                    }
                    .padding()
                    .presentationDetents([.height(120), .medium, .large])
                }
                
                Spacer()
                
                Button("滚动高优先级弹出") {
                    isSheetScrollable = true
                }
                .sheet(isPresented: $isSheetScrollable) {
                    VStack(spacing: 16) {
                        Text("大熊猫侯佩 @ csdn")
                            .font(.headline)
                        List(0..<50, id: \.self){ i in
                            Text("Item \(i)")
                                .font(.subheadline)
                        }
                        .listStyle(.plain)
                    }
                    .padding()
                    .presentationDetents([.height(120), .medium, .large])
                    .presentationContentInteraction(.scrolls)
                }
            }
            .font(.headline)
            .buttonStyle(.borderedProminent)
            .padding(.top, 200)
            .padding(.horizontal, 50)
        }
    }
}

在这里插入图片描述

5. 定制 sheet 在紧密尺寸下的大小

在 iOS 16.4 之前，如果在 iPhone 横屏时 sheet 弹窗，则弹出窗口将会铺满整个屏幕。

从 iOS 16.4 开始，我们可以为弹窗应用新的 .presentationCompactAdaptation(_: ) 修改器来改变横屏时弹窗的大小：

struct SheetView: View {
    @Environment(\.dismiss) var dismiss
    
    var body: some View {
        VStack(spacing: 16) {
            Text("大熊猫侯佩 @ csdn")
            Button("关闭"){
                dismiss()
            }
        }
    }
}

@available(iOS 16.4, *)
struct ContentView: View {
    @State private var isSheet = false
    @State private var isSheetCompactSizeCustom = false
    
    var body: some View {
                
        ZStack(alignment: .top) {
            Rectangle()
                .fill(Gradient(colors: [.red,.green]).opacity(0.66))
                .ignoresSafeArea()
            
            HStack {
                Button("弹出") {
                    isSheet = true
                }
                .sheet(isPresented: $isSheet) {
                    SheetView()
                        .padding()
                        .frame(width: 200)
                        .presentationDetents([.height(200), .medium, .large])
                }
                
                Spacer()
                
                Button("自定义尺寸弹出") {
                    isSheetCompactSizeCustom = true
                }
                .sheet(isPresented: $isSheetCompactSizeCustom) {
                    VStack(spacing: 16) {
                        Text("大熊猫侯佩 @ csdn")
                    }
                    .padding()
                    .frame(width: 350)
                    .presentationDetents([.height(200), .medium, .large])
                    .presentationCompactAdaptation(.sheet)
                }
            }
            .font(.headline)
            .buttonStyle(.borderedProminent)
            .padding(.top, 200)
            .padding(.horizontal, 50)
        }
    }
}

在这里插入图片描述

6. Xcode 预览模式对调试输出的支持

Xcode 14.3 之前，我们在预览（Preview）模式中测试 SwiftUI 界面功能时无法观察调试语句（ print 等方法）的输出结果，必须在模拟器或真机中运行才可以在 Xcode 底部调试小窗口中看到 print() 等方法的输出。

从 Xcode 14.3 开始，以预览模式运行 App 时也可以在调试窗口中看到调试语句的输出了，真是太方便了：

@available(iOS 16.4, *)
struct ContentView: View {
    
    var body: some View {
                
        ZStack(alignment: .center) {
            Rectangle()
                .fill(Gradient(colors: [.red,.green]).opacity(0.66))
                .ignoresSafeArea()
            
            Button("显示 debug 输出") {
                print("显示随机数: \(Int.random(in: 0..<10000000))")
            }
        }
    }
}

在这里插入图片描述

7. 总结

在本篇博文中，我们介绍了在 Xcode 14.3 和 iOS 16.4 中 SwiftUI 为我带来的新方法和新功能，解决了诸多燃眉之急的问题，小伙伴们不想赶快尝试一下吗？🚀

感谢观赏，再会！😎

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

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

相关文章

头歌计算机组成原理实验—运算器设计(7) 第7关：6位有符号补码阵列乘法器

头歌计算机组成原理实验—运算器设计(7) 第7关：6位有符号补码阵列乘法器

第7关&#xff1a;6位有符号补码阵列乘法器 实验目的 帮助学生掌握补码阵列乘法器的实现原理。 视频讲解 实验内容 在 Logisim 中打开 alu.circ 文件&#xff0c;在6位补码阵列乘法器中利用5位阵列乘法器以及求补器等部件实现补码阵列乘法器&#xff0c;实验框架如图所示&a…
阅读更多...
Linux - Shell 权限 权限管理 权限修改 权限身份的认证 目录的权限 粘滞位

Linux - Shell 权限 权限管理 权限修改 权限身份的认证 目录的权限 粘滞位

shell命令以及运行原理 我们来输入指令的本质就是 输入字符串。 而指令的本质&#xff0c;就是编译好的文件和脚本&#xff0c;而只要是文件&#xff0c;就会在系统的特定路径下存放。 我们使用所有的指令最终都要在 OS &#xff08;操作系统&#xff09;内部运行&#xff0c;…
阅读更多...
〖Python网络爬虫实战㉖〗- Selenium库和ChromeDriver驱动的安装

〖Python网络爬虫实战㉖〗- Selenium库和ChromeDriver驱动的安装

订阅&#xff1a;新手可以订阅我的其他专栏。免费阶段订阅量1000 python项目实战 Python编程基础教程系列&#xff08;零基础小白搬砖逆袭) 说明&#xff1a;本专栏持续更新中&#xff0c;目前专栏免费订阅&#xff0c;在转为付费专栏前订阅本专栏的&#xff0c;可以免费订阅付…
阅读更多...
【C++】内存泄漏 智能指针

【C++】内存泄漏 智能指针

目录 一、什么是内存泄漏二、如何检测内存泄漏1、内存占用变化排查法2、valgrind定位法3、mtrace定位法 三、智能指针分类及作用1、unique_ptr2、shared_ptr3、weak_ptr 一、什么是内存泄漏 在实际的 C 开发中&#xff0c;我们经常会遇到诸如程序运行中突然崩溃、程序运行所用…
阅读更多...
关于 HTTPS 的加密流程

关于 HTTPS 的加密流程

目录 HTTP 与 HTTPS 的区别加密方式HTTPS 基本工作过程1. 仅使用对称密钥2. 引入非对称密钥对 key 进行加密3. 引入证书, 破解中间人攻击 HTTP 与 HTTPS 的区别 其实 HTTPS 与 HTTP 一样都是应用层协议, HTTPS 只是在 HTTP 的基础上再加上了一个加密层. 为啥要对 HTTP 进行加密…
阅读更多...
bugku---misc

bugku---misc

一.telnet 下载后是一个压缩包 条件反射&#xff0c;先丢在wireshark中看一下&#xff0c; 直接搜flag&#xff0c;就 出来了 Data: flag{d316759c281bf925d600be698a4973d5} 二.简单取证1 之前只做过取证大赛的&#xff0c;但是这个没有啥思路&#xff0c;看了一下需要工具m…
阅读更多...
Redis集群简介及槽位映射（哈希取余和一致性哈希算法）

Redis集群简介及槽位映射（哈希取余和一致性哈希算法）

redis cluster需求至少需要3个master才能组成一个集群&#xff0c;同时每个sentinel至少有一个slave节点&#xff0c;各个节点之间保持tcp通信。当master发生宕机&#xff0c;redis cluster自动将对应的slave节点提拔为master,来重新对外提供服务。 先来说一下槽&#xff0c;集…
阅读更多...
从“被动发现”变为“主动感知”|智能井盖脚下安全守护者

从“被动发现”变为“主动感知”|智能井盖脚下安全守护者

井盖作为城市基础设施的重要组成部分&#xff0c;具有关键的作用。城市的管道网络错综复杂&#xff0c;包括雨水、污水、弱电和强电等。其中&#xff0c;雨水和污水管道的管径较大&#xff0c;可能会导致隐藏或其他安全事故的发生。而弱电井则是整个城市信息传输的重要环节&…
阅读更多...
Java 基础进阶篇（十四）：File 类常用方法

Java 基础进阶篇（十四）：File 类常用方法

File 类的对象代表操作系统的文件&#xff08;文件、文件夹&#xff09;&#xff0c;File 类在 java.io.File 包下。 File 类提供了诸如&#xff1a;创建文件对象代表文件&#xff0c;获取文件信息&#xff08;大小、修改时间&#xff09;、删除文件、创建文件&#xff08;文件…
阅读更多...
Java【文件和IO】File 类, 字节IO流的使用

Java【文件和IO】File 类, 字节IO流的使用

文章目录 前言一、File 类1, 构造方法2, 成员方法 二、字节流输入输出1, 字节流输入 InputStream1.1, 每次输入一个字节1.2, 每次输入多个字节 2, 字节流输出 OutputStream2.1, 每次输出一个字节2.2, 每次输出多个字节 总结 前言 各位读者好, 我是小陈, 这是我的个人主页, 希望…
阅读更多...
chatgpt赋能Python-python3__2怎么算

chatgpt赋能Python-python3__2怎么算

Python3中<<2的计算方法 Python3是一种高级编程语言&#xff0c;它具有强大的数据分析和计算能力。在Python3中&#xff0c;<<2是一种用于移位计算的运算符。在本篇文章中&#xff0c;我们将介绍Python3中<<2的计算方法。 什么是移位运算符 移位运算符是一…
阅读更多...
C++基础语法——内存管理

C++基础语法——内存管理

1. C/C中的内存管理 我们先看如下一段代码 #include <iostream>using namespace std;int globalVar 1; static int staticGlobalVar 1;void Test() {static int staticVar 1;int localVar 1;int num1[10] { 1, 2, 3, 4 };char char2[] "abcd";const ch…
阅读更多...
rk3399 buildroot ubuntu20版本编译遇到问题

rk3399 buildroot ubuntu20版本编译遇到问题

一、编译uboot遇到问题 /usr/include/libfdt.h:258:1: error: redefinition of fdt_set_version 258 | fdt_set_hdr_(version); | ^~~~~~~~~~~~ In file included from tools/fdt_host.h:11, from tools/imagetool.h:22, from tools…
阅读更多...
BurpSuite—-Target模块(目标模块)

BurpSuite—-Target模块(目标模块)

前言 本文主要介绍BurpSuite—-Target模块(目标模块)的相关内容 关于BurpSuite的安装可以看一下之前这篇文章&#xff1a; http://t.csdn.cn/cavWt Target功能 目标工具包含了SiteMap&#xff0c;用你的目标应用程序的详细信息。它可以让你定义哪些对象在范围上为你目前的工…
阅读更多...
基于QGIS的长株潭城市群边界范围融合实战

基于QGIS的长株潭城市群边界范围融合实战

背景 在面向区域的研究过程中&#xff0c;比如一些研究区域&#xff0c;如果是具体的行政区划&#xff0c;比如具体的某省或者某市或者县&#xff0c;可以直接从国家官方的地理数据中直接下载就可以。但如果并没有直接的空间数据那怎么办呢&#xff1f;比如之前遇到的一个场景&…
阅读更多...
chatgpt赋能Python-python3_len__

chatgpt赋能Python-python3_len__

Python3 len()函数&#xff1a;使用方法和常见应用 在Python中&#xff0c;len()函数是一个内置函数&#xff0c;用于返回对象的长度或元素的个数。它适用于字符串、列表、元组、字典、集合等Python数据类型。在本篇文章中&#xff0c;我们将深入探讨Python3 len()函数的使用方…
阅读更多...
C++ [STL之string模拟实现]

C++ [STL之string模拟实现]

本文已收录至《C语言和高级数据结构》专栏&#xff01; 作者&#xff1a;ARMCSKGT STL之string模拟实现 前言正文存储结构默认成员函数构造函数析构函数拷贝构造函数赋值重载 容量操作类获取字符串长度size获取当前容量capacity查询是否为空串emptyreserve扩容调整字符串大小si…
阅读更多...
基于Freertos的ESP-IDF开发——6.使用DHT1温湿度传感器

基于Freertos的ESP-IDF开发——6.使用DHT1温湿度传感器

基于Freertos的ESP-IDF开发——6.使用DHT1温湿度传感器 0. 前言1. DHT11驱动原理2. 完整代码3. 演示效果4. 其他FreeRtos文章 0. 前言 开发环境&#xff1a;ESP-IDF 4.3 操作系统&#xff1a;Windows10 专业版 开发板&#xff1a;自制的ESP32-WROOM-32E 准备一个DHT11温湿度传…
阅读更多...
【Element-ui】el-table大数据量渲染卡顿问题

【Element-ui】el-table大数据量渲染卡顿问题

1、场景描述 在项目开发中&#xff0c;遇到在表格中一次性加载完的需求&#xff0c;且加载数量不少&#xff0c;有几百几千条&#xff0c;并且每条都可能有自己的下拉框&#xff0c;输入框来做编辑功能&#xff0c;此时普通的el-table肯定会导致浏览器卡死&#xff0c;那么怎么…
阅读更多...
Windows10 双网卡配置，轻松实现内外互通

Windows10 双网卡配置，轻松实现内外互通

1 背景 我平常需要连接外网查阅资料&#xff0c;聊天等&#xff0c;做实验时需要将写到的代码打包部署到内网服务器中&#xff0c;所以需要频繁地切换内外网&#xff0c;修改静态网络配置。很是苦恼。 2 方法 最近&#xff0c;我找到了几种解决办法。 方法一、…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023