/

SwiftUI: 間距

SwiftUI: 間距

在上一篇 SwiftUI 的教程中，我提到了如何使用 stack 來排列視圖：

1
2
3
4
VStack {
 Text("Hello World")
 Text("Hello again!")
}

讓我們來談談間距。

注意兩個 Text 視圖之間沒有間距嗎？這是因為 VStack 的默認行為。

VStack 可以接受一個 spacing 參數：

1
2
3
4
VStack(spacing: 100) {
 Text("Hello World")
 Text("Hello again!")
}

這將在 VStack 中的視圖之間增加 100 個點的間距。

你也可以使用 Spacer 視圖：

1
2
3
4
5
VStack {
 Text("Hello World")
 Spacer()
 Text("Hello again!")
}

Spacer 會填滿所有可用的空間：

你可以使用 frame() 修改器來限制 Spacer 的寬度：

1
2
3
4
5
6
VStack {
 Text("Hello World")
 Spacer()
 .frame(height: 20)
 Text("Hello again!")
}

tags: [“SwiftUI”, “間距”, “VStack”, “Spacer”]