第 2 课：VStack纵向布局

日期：2026-09-02
课程序号：第 2 课
知识点：VStack、alignment 与 spacing

用途

将标题和说明组合成纵向信息块。

核心概念

VStack 按声明顺序纵向排列子视图。
alignment 控制水平对齐；spacing 控制相邻视图间距。

最小代码或操作示例

swift

import SwiftUI
struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            Text("今日课程").font(.title)
            Text("完成一个 5 分钟练习")
        }
        .padding()
    }
}

3～5 分钟练习

增加第三行“记得核对答案”，并将间距改为 20。

参考答案

swift

VStack(alignment: .leading, spacing: 20) {
    Text("今日课程").font(.title)
    Text("完成一个 5 分钟练习")
    Text("记得核对答案")
}

与上一课的联系

上一课只有一个 Text；本课在 body 中组合多个 View。