╰つ栺尖篴夢ゞ

已经了解了 SwiftUI 如何通过使用 @State 属性包装器将变化的数据存储在结构体中，如何使用 $ 将状态绑定到UI控件的值，以及更改 @state 包装的属性时是如何自动让 SwiftUI 重新调用结构体的 body属性的。所有这些结合在一起，可以编写如下代码：struct ContentView: View { @State private var blurAmount: CGFloat = 0 var body: some View { VStack .

SwiftUI 提供了视图不同边缘的对齐指南（.leading、trailing、top 等）以及 .center 和两个基线选项来帮助文本对齐。然而，当处理在不同视图之间分割的视图时，如果必须使在用户界面完全不同的两个视图部分对齐，这些方法都不能很好地很好解决问题。为了解决类似的问题，SwiftUI 允许创建自定义的对齐辅助线，并在整个 UI 的视图中使用这些辅助线，在这些视图之前或之后发生什么并不重要，但它们仍然会排成一条线。例如，下面的布局在左侧显示我的 CSDN 帐户名和我的个人资料头像，右侧.

一、SwiftUI 布局简介在这个技术项目中，我们将探讨 SwiftUI 如何处理布局。有些事情已经解释过了，有些可能是你自己弄明白的，但更多的是你在这一点上想当然的事情，所以我希望一个详细的探索能真正为 SwiftUI 的工作方式提供一些启示。在此过程中，您还将学习如何创建更高级的布局对齐，使用GeometryReader构建特殊效果，以及更多——我知道您会热衷于在自己的应用程序中部署的一些真正强大的功能。继续使用单视图应用程序模板创建一个新的 iOS 项目，并将其命名为 layoutDageM

对于应该与应用程序中的许多视图共享的数据，SwiftUI 为我们提供了 @EnvironmentObject 属性包装器，这让我们可以在任何需要的地方共享模型数据，同时还确保我们的视图在数据更改时自动保持更新。可以把 @EnvironmentObject 看作在许多视图上使用，是一种比 @ObservedObject 更智能、更简单的方式。与其在视图 A 中创建一些数据，然后将其传递给视图 B，然后是视图 C，然后是视图 D 才最终使用它，可以在视图 A 中创建它并将其放入环境中，以便视图 B、C 和 .

一、如何创建常量绑定？当正在制作一些 UI 原型时，或者当只需要传入一个值来让 SwiftUI 预览显示一些有意义的东西时，可以会发现使用常量绑定很有帮助：硬编码的值不会改变，但可以仍然像常规绑定一样使用，因此我们的代码可以正常工作。例如，如果想创建一个切换开关，通常必须创建一个@State 属性来存储布尔值，然后在创建它时将其发送到切换开关中；但是，如果只是为用户界面设计原型，则可以改用常量绑定，如下所示：Toggle(isOn: .constant(true)) { Text("Sho

一、SwiftUI 视图创建首先，创建一个新的 SwiftUI 视图，为了举例说明，在这个新视图中，会展示一个有各种颜色的矩形列表，并把新视图命名为 ColorList：import SwiftUIstruct ColorList: View { var body: some View { Text("Hello, World!") }}struct ColorList_Previews: PreviewProvider { static var p

一、前言在 UIKit 的框架中，我们时常使用 UINavigationViewController 来管理页面的 push 和 pop，这是页面管理的基本操作。而到了 SwiftUI，该操作是交由 NavigationView 和 NavigationLink 来完成。本文先从 NavigationView 的基本应用开始，再补充如何灵活的使用 NavigationView 来完成很多更细节化的需求。二、基本概念如下所示，用一个 demo 展示了 NavigationView 和 Navig

一、创建项目并体验画布① 系统要求创建 SwiftUI 项目工程，体验画布、预览模式和 SwiftUI 模板代码；要想在 Xcode 中预览画布中的视图，或者与画布中的视图进行交互，需要 Mac 系统版本号不低于 macOS Catalina 10.15。② 步骤打开 Xcode，在启动页面点击创建新工程，或者在菜单中选择文件->新建->项目：在项目模板选择器中，选择 iOS 作为项目平台，选项单视图应用（App）作为项目模板，并点击下一步（Next）：输入项

一、前言地标详情页视图已经创建完成，我们需要提供一种方式让用户可以查看完整的地标列表，并且可以查看每一个地标的详情。地标详情页视图的创建，请参考我的博客：SwiftUI之深入解析如何创建和组合视图。本文将分析如何创建一个可以展示任何地标信息的视图，并动态生成一个可滚动列表，用户可以点击列表项去查看地标的详细信息；优化视图显示时，可以使用 Xcode 画布来渲染多个不同设备大小下的预览视图。二、样本数据自定义视图所展示的信息都直接被写死在代码中，那么如将何自定义视图传入样本数据进行展示：

一、前言阅读了我的前两篇博客的朋友，应该都熟练掌握了 SwiftUI 如何创建一个任何相关信息的展示视图和各个视图之间的相互组合，以及动态生成一个展示相关信息的可滚动列表，用户可以点击列表项去查看其相关的详细信息。那么，当我们需要去标记相关的信息，亦或者过滤信息列表，只需要展示必要的相关信息，该怎么继续处理呢？有关详情视图的创建和视图的组合的示例，请参考我的博客：SwiftUI之深入解析如何创建和组合视图；动态生成一个展示相关信息的可滚动列表，可以点击查看其相关的详细信息的示例，请参

一、创建徽章视图创建徽章前需要使用 SwiftUI 的矢量绘画 API 创建一个徽章视图：选择文件 -> 新建 -> 文件，然后从 iOS 文件模板列表中选择 SwiftUI View，点击下一步(Next)，输入文件名 Badge 后点击创建 (Create)：调整 Badge 视图，暂时先让它显示“Badge”文本，稍后再绘制徽章的形状：二、绘制徽章背景使用 SwiftUI 的图形 API 绘制一个徽章形状：...

一、前言使用 SwiftUI 可以把视图状态的改变转成动画过程，SwiftUI 会处理所有复杂的动画细节。本文中，会给跟踪用户徒步的图表视图添加动画，使用 animation(_: ) 修改器给一个视图添加动画效果非常容易。可以下载文末的示例代码并跟着本篇教程一步步实践，或者查看本篇完成状态时的工程代码去学习，就可以轻松完成视图的动画添加和转场动画设定。二、给每个视图单独添加动画在视图上使用 animation(_: ) 修改器时，SwiftUI 会在视图的任何可进行动画的属性发生改变时产

一、从 class 迈向 struct，从 class 迈向 function可以将前端框架归纳为几个要素：元件化；响应式机制；状态管理；事件监听；生命周期。在写 SwiftUI 的时候总是想到 React 的发展史，最初 React 建立元件的方式是透过 JavaScript 的 class 语法，每个 React 的元件都是一个类别。class MyComponent extends React.Component { constructo

一、基本术语三角是关于直角三角形的边和角之间的关系，可以给它们取个随意的名字，以确保我们都能理解对方，这些名称并不相关，可以选择任意名称，本文名称定义如下：直角三角形：或者简单的直角三角形，它是一个三角形，其中有一个角是 90 度；Hypotenuse（斜边）：它是直角三角形中最大的边，也是对着直角的边；Leg：任意边，这不是斜边；Opposed Leg：相对于其中一个角度，它是没有“接触”它的那个，在上图中， leg(a) 与 𝝰(alpha) 相反，leg(b) 与

一、前言本文将深入探讨一些创建 SwiftUI 动画的高级技术，讨论 Animatable 的协议，它可靠的伙伴 animatableData，强大但经常被忽略的 GeometryEffect 以及完全被忽视但全能的 AnimatableModifier 协议。这些都是被官方文档完全忽略的主题，在SwiftUI 相关的帖子和文章中也几乎没有提及，不过它们还是提供了创建一些相当不错的动画的工具。二、显式动画 VS 隐式动画① 动画实现在 SwiftUI 中，有两种类型的动画：显式和隐式：

一、前言在SwiftUI之深入解析三角函数和三角公式的应用，已经了解了 Animatable 的协议，以及如何使用它来动画路径。接下来，我们将使用相同的协议来动画变换矩阵，使用一个新的工具：几何效果。几何效果是一个协议，符合 Animatable 和ViewModifier。为了符合几何效果，需要实现以下方法：func effectValue(size: CGSize) -> ProjectionTransform假设方法叫做 SkewEffect，为了将它应用到一个视图，可以这样使用

一、前言在我之前的 SwiftUI之深入解析高级动画的路径Paths和 SwiftUI之深入解析高级动画的几何效果GeometryEffect 两篇博客中，已经对 Animatable 协议使用做详细的分析，本文将分析 AnimatableModifier，使用它可以完成更多的动画工作。AnimatableModifier 是一个 ViewModifier，符合 Animatable 协议。二、动画文本首先需要制作一些文字动画，如下所示，创建一个进度加载指示器：可能很多人都认为应该使用

一、前言本文中将详细探讨 TimelineView，将从最常见的用法开始。然而，我认为最大的潜力在于结合TimelineView和我们已经知道的现有动画。通过一点创造性，这种组合将让我们最终做出“关键帧类”的动画。二、TimelineView 的组件TimelineView 是一个容器视图，它根据相关的调度器确定的频率重新评估它的内容，TimelineView 接收一个调度器作为参数。如下所示，使用一个每半秒触发一次的调度器：TimelineView(.periodic(from: .no

SwiftUI 让创建自定义 UI 组件变得非常容易，因为它们实际上只是一些带有 @Binding 的视图供我们阅读。为了演示这一点，我们将构建一个 star rating view，让用户通过点击图像输入 1 到 5 之间的分数，尽管可以使这个视图足够简单，以适合实际使用，但最好在适当的地方添加一些灵活性，以便它也可以在其它地方使用。在这里，这意味着将创建六个可自定义属性：在评级之前应该放置什么标签（默认为空字符串）；最大整数评级（默认值 5）；关闭和打开图像，这决定了当星.

SwiftUI 的各种堆栈是许多框架中最基本的布局工具，能够定义组视图，这些组视图可以按照水平、垂直或覆盖视图对齐。当涉及到水平和垂直的变体时( HStack 和 VStack)，需要在这两者之间动态的切换。例如，假如正在构建一个 App 其中包含 LoginActionsView，一个让用户登录时在列表中选择操作的类：VStack {以上代码中，使用了 fixedSize 防止按钮文本被截断，这仅是在确信给定的内容视图不会比视图本身更大的情况。

在 iOS 16 中，Apple 引入了三种新的宽度样式字体到 SF 字体库：Compressed、Condensed、Expend，那么在 SwiftUI 中是什么样式？还有如何使用它们？

在 SwiftUI 中组合矩形来创建条形图是比较容易的，SwiftUI 是一个很好的平台，用于创建视图和快速重构独立的子视图。在 SwiftUI 中构建条形图需要做一些工作，随着使用数据来试用条形图，可以确定更多的定制化，使用 GeometryReader 可以创建适应更多可用环境的条形图。

苹果在 WWWDC 2022 上推出了 SwiftUI 图表，这使得在 SwiftUI 视图中创建图表变得异常简单。图表是以丰富的格式呈现可视化数据的一种很好的方式，而且易于理解。本文展示了如何用比以前从头开始创建同样的折线图少得多的代码轻松创建折线图。此外，自定义图表的外观和感觉以及使图表中的信息易于访问也是非常容易的。

本文主要分析如何在 SwiftUI 中使用 ContentUnavailableView 类型以用户友好的方式显示空状态。通过这些简单而强大的功能，能够更好地引导用户，使他们能够理解应用程序的当前状态。ContentUnavailableView 的灵活性和易用性为我们处理应用程序中的不可用状态提供了有力的工具。

本文主要在 SwiftUI 中引入的新视图修饰符 visualEffect，该修饰符允许通过访问特定视图的布局信息来附加一组可动画的视觉效果。给出了一些使用 visualEffect 的简单示例，包括如何使用效果闭包以及如何应用一些常见的视觉效果（例如模糊、透明度、缩放）。此外，还提到了 GeometryProxy 类型的使用，以及 visualEffect 对可动画值的支持，使得可以根据视图的帧和边界来动态调整视觉外观。最后，指出了 visualEffect 修饰符在向后兼容性方面的注意事项。

本主要分析如何使用 SwiftUI 构建一个灵活的选择器（FlexiblePicker），用于选择多个选项。首先创建了一个 Selectable 协议，使得选择的选项对象需要实现 displayedName 和 isSelected 属性。然后，详细介绍实现该选择器的逻辑，包括如何处理选项的布局、宽度和高度，以及如何处理用户与按钮的交互。最后，提供了一个简单的视图实现，可以在 SwiftUI 中使用该选择器。这个选择器可用于创建各种交互式选择界面。

一旦将 App 目标更新到 iOS 17，Xcode 会将任何使用旧的 Map 初始化器的用法标记为已弃用：会有警告提示：init coordinate region 已在 iOS 17 中弃用。请改用带有 MapContentBuilder 参数的地图初始化器。在 iOS 17 中，MapKit 为 SwiftUI 引入了需要 MapContentBuilder 参数的地图初始化器。了解 iOS 17 中的 MapKit 后，可以发现 Apple 引入了更适合 SwiftUI 的 API。

音频图表功能对于视力受损的用户来说是一项重大改进。音频图表功能的好处是，可以将其用于任何想要的视图，甚至包括图像视图，只需创建 AXChartDescriptor 类型的实例。

Alignment guides 是一个强大的布局工具，但通常未被充分利用。在很多情况下，它们可以帮助我们避免更复杂的选项，比如锚点偏好。如下所示，对对齐的更改也可以自动（并且容易地）动画化：如果您曾经尝试过使用 alignment guides，那么可能会对结果感到困惑。它们倾向于做期望它们做的事，直到它们不做。在花了一些时间测试对齐指南的限制后，可以得出结论，它们确实有效。然而，我们对它们的期望是困惑的。

当开始使用 SwiftUI 时，可能接触到的第一个修饰符是 frame(width:height:alignment)，定义 frame 是 SwiftUI 最具挑战性的任务之一，当我们使用修饰符（如 .frame().）时，会发生很多事情。SwiftUI 中的修饰符实际上并不修改视图，大多数情况下，当在视图上应用修饰符时，会创建一个新视图，该视图围绕着被“modified”的视图，需将包装器视图视为 frame。

采用布局协议类型的任务，是告诉 SwiftUI 如何放置一组视图，需要多少空间。这类型常常被作为视图容器，虽然布局协议是 2022 年新推出的（至少公开来说），但是我们在第一天使用 SwiftUI 的时候就在使用了，当每次使用 HStack 或者 VStack 放置视图时都是如此。请注意至少到现在，布局协议不能创建懒加载容器，比如 LazyHStack 或 LazyVStack，懒加载容器是指那些只在滚入屏幕时渲染，滚出到屏幕外就停止渲染的视图。

首先实现一个圆形布局的视图容器 WheelLayout：1)") }当布局发生改变时，SwfitUI 提供了内置动画支持，因此如果将轮子的旋转值更改为 90 度，我们将会看见它是如何逐渐的移动到新的位置上：// ...渲染动画的逻辑就是如此，那么我们在探索一下深层次到底发生了什么？