HStack

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

HStack 会从左到右排列视图：

HStack {
    Image(systemName: "sun.max.fill")
        .foregroundStyle(.yellow)
    Text("Sunny")
}

堆栈可以嵌套。一种常见的布局是由多个行组成的 VStack，每一行都是一个 HStack：

VStack {
    HStack {
        Text("Coffee")
        Text("$3")
    }
    HStack {
        Text("Tea")
        Text("$2")
    }
}

挑战

简单

构建一个天气行：一个包含 HStack 的布局，其中先显示 cloud.sun.fill 符号，再显示文本 Partly cloudy。

亲手试试

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