SwiftUI如何检查视图布局 - SwiftUI简体中文文档
概览
若要了解 SwiftUI 如何确定视图的大小和位置，请利用 Xcode 预览来检查单个视图的边界。你也可以添加临时边框来查看 SwiftUI 如何一同确定多个视图的位置和尺寸。
通过 Xcode 预览高亮显示视图
使用 Xcode 预览，你可以通过在编辑器中选择视图或子视图来快速查看特定视图元素的大小。为说明上述操作，以下示例使用 VStack (英文) 将在名称上方对 SF Symbols 提供的图像垂直分组：
struct StatusRow: View {
let name: String
var body: some View {
VStack {
Image(systemName: "person.circle")
Text(name)
}
}
}
struct StatusRow_Previews: PreviewProvider {
static var previews: some View {
StatusRow(name: "Maria")
}
}
选定 VStack (英文) 时，你将在 Xcode 预览中看到一个围绕视图的蓝色边框：
Xcode 显示了一个拆分视图，代码编辑器在左侧，相应的 Xcode 预览在右侧，上面显示了一个 watchOS 模拟器正面。示例代码位于代码编辑器中，将编辑光标置于含有 VStack 的行中并选中它。watchOS 模拟器的正面里有一个展示了 VStack 边界的矩形，矩形里面是一个来自 SF Symbols 且用圆形圈起来的人形符号，下方是文本“Maria”，这两者均水平居中。
利用临时边框探索复杂布局
若要查看多个视图的边框，或者查看视图未选定时的边框，请使用视图修饰符 border(_:width:) (英文) 临时添加一个边框。将边框的颜色设置为 blue (英文) 以外的某种颜色，以便轻松地将它与 Xcode 添加的边框区分开来：
struct StatusRow: View {
let name: String
var body: some View {
VStack {
Image(systemName: "person.circle")
Text(name)
.border(Color.red)
}
.padding()
.border(Color.gray)
}
}
参考
