后浪云IOS教程：检查视图布局

概览

若要了解 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 预览中看到一个围绕视图的蓝色边框：

利用临时边框探索复杂布局

若要查看多个视图的边框，或者查看视图未选定时的边框，请使用视图修饰符 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)     } }