10.4_配置UIStackView的spacing属性

UIStackView 是一个强大的布局容器，可以帮助你轻松创建各种线性布局。其中，spacing 属性用于设置 stack view 中各个视图之间的间距。掌握 spacing 的配置，能让你更好地控制布局效果，让你的界面更加美观和专业。

什么是 spacing？🤔

spacing 属性定义了 UIStackView 中相邻视图之间的最小距离。你可以把它想象成视图之间的“呼吸空间”。通过调整 spacing 的值，你可以控制视图之间的紧密程度，从而影响整个布局的视觉效果。

• 默认值: 默认情况下，spacing 的值为 0。
• 正值: 正值表示视图之间存在间距。
• 负值: 负值允许视图重叠，但需要谨慎使用，避免出现视觉混乱。

如何设置 spacing？🛠️

你可以通过代码来设置 spacing 属性。以下是一个简单的例子：

let stackView = UIStackView()
stackView.spacing = 10 // 设置间距为 10 points

你也可以在 Interface Builder 中设置 spacing 属性。选择你的 stack view，然后在 Attributes Inspector 中找到 "Spacing" 选项，输入你想要的数值即可。

spacing 的不同模式 🌈

UIStackView 的 distribution 属性会影响 spacing 的行为。不同的 distribution 模式下，spacing 的作用方式略有不同。

1. Fill: 视图会尽可能填充 stack view 的可用空间，spacing 保持不变。
2. Fill Equally: 视图会平均分配 stack view 的可用空间，spacing 保持不变。
3. Fill Proportionally: 视图会根据其 intrinsic content size 比例分配空间，spacing 保持不变。
4. Equal Spacing: 视图之间的间距相等，视图的大小会根据可用空间进行调整。
5. Equal Centering: 视图的中心点之间的距离相等，视图的大小和间距都会根据可用空间进行调整。

spacing 的实际应用 💡

• 创建列表: 使用 UIStackView 和 spacing 可以轻松创建列表，例如设置列表项之间的间距。
• 按钮组: 将多个按钮放入 UIStackView 中，并设置合适的 spacing，可以创建美观的按钮组。
• 自定义布局: 结合不同的 distribution 模式和 spacing 值，你可以创建各种复杂的自定义布局。

示例代码 📝

以下是一个更完整的示例，展示如何使用 UIStackView 和 spacing 创建一个简单的水平布局：

let label1 = UILabel()
label1.text = "Label 1"
let label2 = UILabel()
label2.text = "Label 2"
let label3 = UILabel()
label3.text = "Label 3"

let stackView = UIStackView(arrangedSubviews: [label1, label2, label3])
stackView.axis = .horizontal
stackView.distribution = .fillEqually
stackView.spacing = 20

// 添加 stackView 到你的 view 中，并设置约束

通过调整 stackView.spacing 的值，你可以改变 label 之间的间距，从而影响整个布局的视觉效果。记住，实践是最好的老师！动手尝试不同的 spacing 值，你会更好地理解它的作用。加油！💪