浏览探索 SwiftUI 应用程序结构的代码。

SwiftUI 是一个声明式框架，可帮助您构建应用的用户界面。构成 SwiftUI 应用结构的主要构建块是 App 、 Scene 和 View 协议。本示例将通过演示代码行并解释其工作原理和原因，向您介绍这些协议。

要试验代码，请下载项目文件并在 Xcode 中打开示例。

第 1 部分

应用程序结构 应用结构描述了应用的内容和行为，每个 SwiftUI 应用都有且仅有一个主应用结构。此示例在 My App .swift 文件中定义了其应用结构。让我们来看看该文件的内容。

步骤 1

为了访问 SwiftUI 的符号和功能，该应用程序使用 import 声明来导入 SwiftUI 框架。

笔记 有关更多信息，请参阅 Swift 编程语言中的导入声明 。

import SwiftUI


@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

第 2 步

为了指示 SwiftUI 应用程序的入口点，该示例将 @main 属性应用于应用程序结构。

入口点负责应用程序的启动。

重要的 SwiftUI 应用包含且仅包含一个入口点。尝试将 @main 应用于应用中的多个结构体会导致编译器错误。

import SwiftUI


@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

步骤3

My App 结构符合 App 协议，并提供应用程序的内容及其行为。

import SwiftUI


@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

步骤4

该结构实现了计算属性 body ，这是 App 协议的要求。

此属性返回以 Scene 形式描述的应用程序内容。场景包含定义应用程序用户界面的视图层次结构。SwiftUI 提供不同类型的场景，包括 Window Group 、 Window 、 Document Group 和 Settings 。

import SwiftUI


@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

步骤5

此示例使用 Window Group 场景来表示应用程序显示的主窗口。

SwiftUI 为 Window Group 提供了平台特定的行为。例如，在 macOS 和 iPadOS 中，用户可以从组中打开多个窗口。在 macOS 中，用户可以将窗口组的多个实例组合成一组选项卡。

提示 如果您要创建基于文档的应用（例如文字处理器或文本编辑器），则可以使用 Document Group 场景来打开、保存和编辑文档。有关更多信息，请参阅使用 SwiftUI 构建基于文档的应用 。

import SwiftUI


@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

步骤6

场景包含 Content View ，这是一个自定义视图，它创建由图像和文本组成的视图层次结构。

继续阅读以了解 Content View 如何组成视图层次结构。

第 2 节

内容视图 在 SwiftUI 中，场景包含应用作为其用户界面显示的视图层次结构。视图层次结构定义了视图相对于其他视图的布局。在此示例中， Window Group 场景包含 Content View 使用其他视图组成的视图层次结构。

步骤 1

源代码首先导入 SwiftUI 框架。

如果没有 import 声明， Content View 将无法访问 SwiftUI 中的符号。

import SwiftUI


struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()
    }
}

第 2 步

Content View 是符合 View 协议的结构。

视图定义了屏幕上显示的一个或多个视觉元素。视图通常由其他视图组成，从而形成视图层次结构。

import SwiftUI


struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()
    }
}

步骤3

Content View 实现了计算属性 body ，就像上一节中的“MyApp”结构一样。

笔记 实现 body 是您在整个 SwiftUI 代码中看到的一种常见模式；例如，当结构符合 App 、 Scene 和 View 等协议时。

import SwiftUI


struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()
    }
}

步骤4

Content View 包含 SwiftUI 提供的视图 VStack ，该视图垂直排列子视图。

VStack 会同时渲染其包含的所有屏幕内或屏幕外视图。当子视图数量较少时，使用 VStack 是理想之选。但是，如果您的应用需要显示更多子视图，请考虑使用 Lazy VStack ，它仅在应用需要在屏幕上显示视图时才渲染它们。

实验 用 HStack 或 Lazy HStack 替换 VStack 以水平排列子视图。

import SwiftUI


struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()
    }
}

步骤5

VStack 中的第一个子视图是 Image ，它是一个显示图像的视图。

该示例使用初始化方法 init(system Name:) 显示一个地球仪图像。此方法会创建一个显示系统符号图像的图像视图。地球仪等符号图像来自 SF Symbols ，这是一个可在您的应用中使用的图标库。

步骤6

Content View 将视图修饰符 image Scale(_😃 应用于图像视图，以将视图内的图像缩放到相对大小 Image .Scale .large 。

实验 将 Image .Scale .large 更改为其他缩放尺寸。有关尺寸列表，请参阅 Image .Scale 。

步骤7

foreground Color(_😃 修饰符为图像视图添加颜色。

在此示例中， Content View 应用了语义颜色 accent Color ，它反映了系统或应用的强调色。要了解有关颜色表示形式的更多信息，请参阅 Color 。

实验 将前景色更改为另一种语义颜色，例如 primary 或标准颜色，如 teal 。

步骤8

VStack 的第二个子视图是 Text ，该视图显示一行或多行只读文本。

实验 将“Hello, world!”替换为“Hello, your name!”或其他文本。

步骤9

Content View 将 padding(_: _😃 修饰符应用于 VStack ，从而向 VStack 视图的边缘添加特定于平台的默认填充量（即空间）。

实验 您可以通过提供 edges 和 length 参数值来指定要应用的边和填充量；例如， padding([.bottom, .trailing], 20) 。更改填充边和填充量，或注释掉该代码行，看看它对视图有何影响。

import SwiftUI


struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()
    }
}

步骤10

当您运行示例应用程序时，它会显示包含 Content View 中描述的视图层次结构的场景。

实验 使用 Xcode 构建并运行示例。然后按照前面步骤中提到的建议实验来尝试代码。