2.2 检查视图布局

  1分钟内可阅读完  

原文链接: https://developer.apple.com/documentation/swiftui/inspecting-view-layout

2.2 检查视图布局

使用 Xcode 预览或添加临时边框来确定视图的位置与范围。

概述

要了解 SwiftUI 如何确定视图的尺寸和位置，可以借助 Xcode 预览来检查单个视图的边界。你也可以添加临时边框，看看 SwiftUI 如何一并确定多个视图的位置和尺寸。

用 Xcode 预览高亮显示视图

使用 Xcode 预览，只要在编辑器中选中某个视图或子视图，就能快速看到这个特定视图元素的尺寸。为说明这一点，下面的示例使用 VStack 把由 SF Symbols 提供的图像垂直摆放在名字上方：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

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 中带圆圈的 person 符号，下方是文本 Maria，二者都水平居中。

用临时边框探索复杂布局

要同时看到多个视图的边框，或者在视图未被选中时看到边框，可以临时用视图修饰符 border(_:width:) 添加边框。把边框颜色设为 blue 之外的颜色，就能轻松地与 Xcode 添加的边框区分开来：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

struct StatusRow: View {
    let name: String

    var body: some View {
        VStack {
            Image(systemName: "person.circle")
            Text(name)
                .border(Color.red)
        }
        .padding()
        .border(Color.gray)
    }
}

Xcode 显示一个分栏视图，左侧是代码编辑器，右侧是对应的 Xcode 预览，显示一个 watchOS 模拟器表盘。代码编辑器内是示例代码，其中对多个视图应用了不同颜色的边框。编辑器中的光标位于代码末尾，没有选中任何代码。在 watchOS 模拟器的表盘中有一个矩形，表示 VStack 的边界。VStack 内部上方是 SF Symbols 中带圆圈的 person 符号，下方是文本 Christina，并有一个不同颜色的边框表示该视图在 VStack 内的边界。视图中的图像和文本水平居中。

最后修改 September 13, 2026: 更新C和Cpp以及新增Kotlin和SwiftUI (d20dcaaa6)