对齐与间距

本课属于 Coddy Swift 学习旅程的“SwiftUI 入门”单元。第 11 课，共 50 课。

VStack 会将其中的视图居中排列，并在视图之间留出默认的小间距。创建堆栈时，你可以更改这两项设置：

VStack(alignment: .leading, spacing: 12) {
    Text("Order #42")
        .font(.headline)
    Text("2 coffees")
    Text("Ready at 10:30")
}

alignment: .leading 会让视图沿左边缘对齐（.trailing 表示右边缘）。spacing: 12 会在每对视图之间留出 12 个点的间距。

HStack 则改为垂直对齐：.top、.center 或 .bottom：

HStack(alignment: .top, spacing: 20) {
    Text("Left")
    Text("Right")
}

挑战

简单

让收据内容像列表一样排列：将 VStack 的对齐方式设为 .leading，间距设为 12。

亲手试试

import SwiftUI

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

自我测试

这节课包含一个小测验。开始学习即可作答，并记录你的进度。

SwiftUI 入门中的所有课

1简介

4修饰符

7列表

10项目：Coddy 咖啡馆

2显示内容

5状态与按钮

8导航

11最终挑战

3堆栈与布局

6用户输入

9共享数据