让您的应用的视图布局在任何设备上针对您的应用显示的每种内容类型保持流畅。

您使用 SwiftUI 定义的视图要么直接包含 SwiftUI 提供的视图，要么使用包含这些内置视图的其他自定义视图。SwiftUI 视图会自行确定其大小，因此，了解如何在保留内置视图的适应性的同时修改其大小，是创建流畅布局且不使代码复杂化的最佳方法。

文字和符号

在定义应用布局时，文本和符号在向用户传达信息方面起着核心作用，例如在导航链接、按钮标签、表格等中。显示信息或标记其他元素的文本和符号需要有足够的空间来显示其内容。

文本

Text 视图显示只读文本。其内容可以是短 String ，例如戏剧标题或章节标题。Text Text 也可以显示长 String ，例如戏剧中某一场景的所有演员台词。

在布局中声明 Text 视图时，请使用 Font 属性向系统提供有关文本的语义信息。系统会选择字体和大小，以便例如使用 title 字体的 Text 比使用 body 或 caption 的 Text 更加突出。

Text("Hamlet")
    .font(.largeTitle)
Text("by William Shakespeare")
    .font(.caption)
    .italic()

Text 视图可以通过换行或截断来适应某些空间限制，但它不会改变字体大小以适应其理想尺寸小于或大于可用空间的情况。

有关本地化的更多信息，请参阅准备本地化视图 。有关支持动态类型的指导，请参阅将自定义字体应用于文本 。

符号

符号（例如 SF Symbols 提供的图标）可以表示常见的 app 功能，例如文件夹、用于收藏的心形图标或用于访问相机的相机图标。有效的符号可以简化 app 的 UI，并方便 app 用户识别。您可以使用 SwiftUI 提供的标准视图修饰符自定义它们的颜色和大小。即使您在 Image 中指定了系统符号或自定义符号，SF Symbols 也应像文本一样处理。要调整符号的大小和粗细，请指定语义 Font （例如 title ，就像处理 Text 视图一样。

以下示例使用 HStack 创建一行三个 Image 视图，显示来自 SF Symbols 的图标。

HStack {
    Image(systemName: "folder.badge.plus")
    Image(systemName: "heart.circle.fill")
    Image(systemName: "alarm")
}
.symbolRenderingMode(.multicolor)
.font(.largeTitle)

标签

要使用文本和符号来表示应用中的单个元素，请使用 Label 。 Label 负责匹配其标题和图标的大小及其对齐方式。以下代码定义了一个 Label ，它将一些书籍的 SF 符号与一些用于标题的文本组合在一起。该 Label 将 large Title 字体应用于图标和标题。 title And Icon 样式指示视图同时显示其标题和图标，从而覆盖包含视图可能指定的任何内置或自定义 Label Style 。

Label("Favorite Books", systemImage: "books.vertical")
    .labelStyle(.titleAndIcon)
    .font(.largeTitle)

控件

用户交互的视图具有不同的尺寸，以便在多个同类型的元素同时显示时（例如在“设置”窗格中）保持一致性。控件也需要足够大，以便用户能够准确地点击或轻触。您可以使用视图修饰符来选择这些尺寸。例如，您可以使用 control Size(😃 修饰符来缩小或放大控件，或者您可以使用 progress View Style(😃 修饰符来选择进度条的 linear 或 circular 外观。

下面的示例显示了具有不同 Control Size 值的 Picker 和 Button 。

VStack {
    HStack {
        Picker("Choice", selection: $choice) {
            choiceList()
        }
        Button("OK") {
            applyChanges()
        }
    }
    .controlSize(.mini)
    HStack {
        Picker("Choice", selection: $choice) {
            choiceList()
        }
        Button("OK") {
            applyChanges()
        }
    }
    .controlSize(.large)
}

有通用控件（例如 Menu 和 Link ，也有专用视图（例如 Edit Button 和 Color Picker 。使用这些视图可以提供熟悉的 UI 元素，而无需创建需要维护的自定义控件。要了解更多这些内置视图，请参阅控件和指示器 。

图像和形状

图形元素（例如图像和形状）可以为您的应用增添一定程度的视觉效果。这些元素可以是购物应用中的产品图片、游戏中的成就，也可以是通过层叠和对齐各种形状创建的动态背景图案。

图片

在 Image 中显示照片和其他丰富的图形。默认情况下， Image 会以资源的原始大小显示。您可以添加修饰符（例如 resizable(capInsets:resizingMode:) 以及 scaled To Fit() 或 scaled To Fill() 来将其缩放到可用空间。

Image("Yellow_Daisy")
    .resizable()
    .scaledToFit()

如果您从服务器访问图像资产，请使用 Async Image 来处理下载，同时保持应用程序的响应。

有关处理图像的更多信息，请参阅将图像放入可用空间 。

形状

SwiftUI 提供了几种常见的形状和修饰符，用于更改其大小、颜色或其他外观方面。您可以使用单个形状或多个形状的组合来创建背景、边框或其他视觉元素。您可以使用修饰符（例如 frame(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:alignment:) ） 定义形状的大小，或允许其填充所有可用空间。

以下示例展示了三种不同的形状。每个形状的 foreground Color(😃 可自定义该形状的填充颜色。 Rounded Rectangle HStack corner Radius 值和用于定义圆角的 style 参数。HStack 在每个形状之间提供了一些默认间距，并且为了给每个形状提供一个方形的填充空间， aspect Ratio(: content Mode:) 修饰符使 HStack 宽度是高度的三倍。

HStack {
    Rectangle()
        .foregroundColor(.blue)
    Circle()
        .foregroundColor(.orange)
    RoundedRectangle(cornerRadius: 15, style: .continuous)
        .foregroundColor(.green)
}
.aspectRatio(3.0, contentMode: .fit)

有关组合形状的丰富可能性的示例，请参阅绘制路径和形状 。