SwiftUI 布局：修复 VStack/HStack 间距不一致问题

核心速览：VStack 或 HStack 默认的间距（spacing: nil）并非固定值，而是根据相邻视图的类型（如 Text 与 Button）动态计算的。若需统一间距，请务必显式设置 spacing 参数（例如 spacing: 10 或 spacing: 0）。

问题描述

在 SwiftUI 的布局容器（如 VStack、HStack 或 Grid）中，开发者常会发现子视图之间的间隔看起来不统一。即使没有设置 padding，某些视图之间似乎“靠得更近”，而另一些则“离得更远”。

原因分析

这种现象并非 Bug，而是 SwiftUI 为了符合苹果人机交互指南（HIG）而设计的自适应布局逻辑：

动态计算 (Magic Spacing)：当容器的 spacing 参数为 nil（默认值）时，SwiftUI 不会使用固定的像素值（如 8pt）。
上下文感知：系统会分析相邻两个视图的类型。例如，两个 Text 视图之间的默认间距，通常小于一个 Text 和一个 Button 之间的间距。
平台差异：这种计算逻辑在 iOS、macOS 和 watchOS 上均有不同表现，以适应不同平台的视觉规范。

解决方案

如果你追求像素级的精确布局，或者希望所有子视图间距完全一致，必须显式指定 spacing 参数。

1. 统一固定间距

强制所有子视图之间保持 10pt 的距离：

Swift

VStack(spacing: 10) {
    Rectangle().frame(height: 50)
    Text("Fatbobman")
    Rectangle().frame(height: 50)
}

2. 消除所有间距

这是最常见的需求，特别是当你需要无缝拼接视图时：

Swift

// 也就是 spacing: 0
HStack(spacing: 0) {
    Color.red
    Color.blue
}

什么时候使用默认值 (nil)？

虽然默认行为可能导致视觉上的不一致，但在构建表单（Form）、信息展示页等标准系统风格界面时，使用默认值（nil）能让你的 App 看起来更像原生应用，自动适配不同动态字体大小下的视觉平衡。