🔍 修复 SwiftUI Stack 布局中的不规则间距

TL;DR: 在 SwiftUI 中，VStack 和 HStack 间距不一致通常是因子视图的默认间距差异所致。当容器的 spacing 为 nil 时，间距由系统动态计算。通过显式设置 spacing 参数，可实现一致的子视图间隔，或利用默认值实现动态调整。

问题描述

在 SwiftUI 的布局容器（如 VStack、HStack 或 Grid）中，开发者可能会发现子视图之间的间隔不统一。这种不一致可能影响界面美观和用户体验。

原因分析

1. 视图默认间隔的差异：SwiftUI 中，每个视图或组件都有其默认的 spacing 设置。
2. 容器的 spacing 参数：当布局容器的 spacing 参数为 nil 时，SwiftUI 会根据每个子视图的默认 spacing 动态计算间隔。
3. 不一致的来源：当不同子视图的默认 spacing 值不同时，容器内的间隔也会呈现不一致的效果。

例如，Text 和 Rectangle 可能具有不同的默认间隔，导致布局中的子视图间隔看起来不一致。

解决方案

明确指定容器的 spacing 参数，以统一子视图之间的间隔。

VStack(spacing: 10) {
    Rectangle()
    Text("Fat")
    Rectangle()
}

通过显式设置 spacing，可以确保所有子视图间隔一致。

友情提示

SwiftUI 的默认间隔计算系统基于以下设计逻辑：

• 考虑不同设备和平台的差异；
• 根据字体、组件类型和上下文动态调整间隔。

因此，如果默认间隔满足设计要求，开发者可以继续使用 nil，以利用系统提供的动态调整功能。

延伸阅读

• 在 SwiftUI 中，spacing = nil 表示什么？