SwiftUI中为何给Image添加frame()会与兄弟视图产生间距？

先看你给出的示例代码：

struct ContentView: View {
    var body: some View {
        VStack {
            Text("A")
                .border(Color.red, width:1)
            Image(systemName: "globe")
                .frame(minHeight:50)
                .border(Color.black, width:1)
        }
        .border(Color.green, width:1)
        VStack {
            Text("B")
                .border(Color.red, width:1)
            Image(systemName: "globe")
                .border(Color.black, width:1)
        }
        .border(Color.green, width:1)
    }
}

这个间距差异的核心在于SwiftUI的默认布局间距逻辑，以及frame修饰符对视图布局边界的改变：

1. 未添加frame的Image
   此时Image的布局边界完全等于它的内在内容尺寸（也就是系统图标"globe"的原始大小）。VStack在计算Text和Image之间的间距时，会针对这两种「内联型」视图应用极小的默认间距，所以你会看到Text("B")和Image几乎贴在一起。

2. 添加frame(minHeight:50)的Image
   frame(minHeight:50)相当于给Image包裹了一个高度至少为50的容器视图，这个容器的布局边界是50高度（从黑色边框能直接看出来），而Image本身会默认居中在这个容器里。此时VStack会把这个容器视图视为独立的「块级」布局元素，系统会为块级元素之间分配更大的默认间距，所以Text("A")和这个容器之间就出现了明显空隙。

你可以通过两个操作验证这个逻辑：

• 给两个VStack都设置spacing: 0，此时两个VStack里的Text和Image之间的间距都会消失；
• 给带frame的Image添加.alignmentGuide(.top) { $0[.top] }，强制让容器顶部对齐Image顶部，此时容器顶部与Image顶部重合，VStack的间距会看起来更小，但本质还是系统默认间距作用在容器和Text之间。

内容的提问来源于stack exchange，提问作者John Cashew