Spacer 与 ZStack

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

Spacer 会占据堆栈中的所有空闲空间。在 HStack 中，它会把前面的视图推到左侧，把后面的视图推到右侧：

HStack {
    Text("Total")
    Spacer()
    Text("$12.50")
}

在 VStack 中，Spacer 会让视图在垂直方向上分开。

ZStack 会将视图一层层叠放。第一个视图在最底层，后面的视图依次叠放在上面：

ZStack {
    Color.blue
    Text("On top")
        .foregroundStyle(.white)
}

将 Color.blue 用作视图时，它会填满分配给它的所有空间，因此这里它会成为文字后面的蓝色背景。

挑战

简单

让总计这一行占满宽度：在 Total 和 $12.50 之间添加 Spacer，这样价格就会靠到右边缘。

亲手试试

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共享数据