Menu
CoddyTech

VStack

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

一个 body 只返回一个视图。要显示多个视图,可以把它们放在一个堆栈中。VStack 会从上到下排列其中的视图:

VStack {
    Text("Coddy Cafe")
        .font(.title)
    Text("Open 8:00 to 18:00")
}

视图放在花括号内,每行一个,顺序与它们在屏幕上显示的顺序一致。每个视图都可以有自己的修饰符。

堆栈也是一种视图,所以你可以设置堆栈本身的样式。堆栈上的修饰符会应用于其中没有设置自身修饰符的视图:

VStack {
    Text("Coffee")
    Text("Tea")
}
.font(.headline)
challenge icon

挑战

入门

显示一张联系人卡片:使用一个 VStack,其中包含两段文本,上方是 Ada Lovelace,下方是 Engineer。将姓名的字体设为 .title。

亲手试试

import SwiftUI

@main
struct CoddyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}
quiz icon自我测试

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

SwiftUI 入门中的所有课

自己练习: SwiftUI 在线编辑器