xubaimiao的专栏

在本章中，我们探讨了在 SwiftUI 中创建按钮的基础知识。按钮在任何应用程序的用户界面中都起着至关重要的作用。精心设计的按钮不仅可以增强 UI 的视觉吸引力，还可以提升应用程序的整体用户体验。正如您所发现的，通过结合 SF 符号、渐变和动画，您可以毫不费力地构建吸引用户的有吸引力且实用的按钮。从上面的代码中可以看出，您需要复制每个按钮的所有修饰符。当您在预览中点击按钮时，您应该会看到一个流畅的动画，该动画会放大和缩小按钮。按钮可启动特定于应用的操作，具有可自定义的背景，并且可以包含标题或图标。

例如，在明暗模式下，文本视图的主色默认设置为黑色。当然，在你掌握 SwiftUI 之前，你还需要大量的练习。因此，在深入研究 ScrollView 以使视图可滚动之前，让我们先以一个挑战开始本章。你的任务是创建一个类似于图 1 所示的卡片视图。图 3. 创建新文件。在这种情况下，SwiftUI 可以以最小为原始字体大小 50% 的字体大小绘制文本。这完全没问题，但是，我想介绍一种更好的组织代码的方法。为了实现卡片视图，让我们创建一个单独的文件。通过利用堆栈、图像视图和文本视图，您应该能够构建所需的 UI。

SwiftUI 中的堆栈类似于 UIKit 中的堆栈视图。通过组合水平和垂直堆栈中的视图，您可以为应用构建复杂的用户界面。在 UIKit 中，必须使用自动布局来构建适合所有屏幕尺寸的界面。好消息是，在 SwiftUI 中，您不再需要使用自动布局。，您的最后练习是创建一个类似于图 28 中所示的布局。您可以随意选择符合您偏好的不同图像，而不必严格遵循我使用的图像。在本章中，我将指导您了解所有类型的堆栈，并向您展示如何使用堆栈构建网格布局。在本章结束时，您将能够有效地将视图与堆栈结合起来并构建您想要的 UI。

要使用这些符号，无需额外安装。只要您的应用部署到运行 iOS 13（或更高版本）的设备，您就可以直接访问这些符号。在本章中，我向您展示了如何在 SwiftUI 中处理图像，重点介绍了开发人员如何轻松显示图像并应用各种修改器来实现所需的图像效果。随着 iOS 17 的发布，Apple 通过发布 SF Symbols 5 进一步改进了图像集，其中包含 700 多个新符号并支持一系列富有表现力的动画。您可以传递 0 到 1 之间的值来指示图像的不透明度，其中 0 表示视图完全不可见，1 表示图像完全不透明。

对于不熟悉 Markdown 的人来说，它是一种使用简单易读的格式来设置纯文本样式的方法。正如您所体验到的，在 SwiftUI 中只需几行代码即可创建精美的 3D 样式文本。在 Xcode 15 中，预览画布应自动在您在模拟器选择中选择的模拟器中呈现应用预览（例如 iPhone 14/15 Pro）。图 19. 使用自定义字体。，您将能够看到给定文本的呈现方式。出于此演示的目的，我只添加了常规字体文件（即 Nunito-Regular.ttf）。如果您需要使用粗体或斜体字体，您还需要添加相应的字体文件。

过去，Xcode 中的预览功能一直是一个弱点，因为只能在 Interface Builder 中预览简单的布局，并且直到将应用程序加载到模拟器上后才能预览完整的 UI。然而，随着 SwiftUI 的推出，Apple 为开发人员提供了一个统一的 UI 框架，用于在所有 Apple 设备上构建用户界面。虽然专栏主要侧重于为 iOS 构建 UI，但需要注意的是，您在这里学到的所有内容都可以应用于其他 Apple 平台，例如 watchOS 和 macOS。相反，你会描述你想要的披萨的烹饪方式。