SwiftUI控制视图之间间距的spacing

在 SwiftUI 中，spacing 是一个用于控制视图之间间距的属性，常用于容器视图（如 HStack、VStack 和 ZStack）来调整子视图之间的距离。

基本用法

1、HStack 和 VStack 的 spacing

spacing 定义了容器中子视图之间的间距：

HStack(spacing: 20) { // 子视图间距为 20
    Text("Hello")
    Text("SwiftUI")
}
.background(.blue)

效果：两个 Text 之间的间距是 20 点。

详细示例

1、自定义间距

可以为 HStack 和 VStack 设置任意值的间距：

VStack(spacing: 30) { // 垂直方向上间距为 30 点
    Text("First Line")
    Text("Second Line")
    Text("Third Line")
}
.background(.yellow)

2、默认间距

如果不指定 spacing，则SwiftUI会在子视图之间插入默认间距：

HStack {
    VStack(spacing:0) {
        Text("Default")
        Text("Spacing")
    }
    .background(.purple)
    VStack {
        Text("Default")
        Text("Spacing")
    }
    .background(.purple)
}

3、动态间距

可以根据条件动态调整间距：

let isCompact = true

VStack(spacing: isCompact ? 10 : 30) {
    Text("Dynamic")
    Text("Spacing")
}
.background(.cyan)

注意事项

1、影响范围：

spacing 仅影响直接子视图之间的间距，不能影响子视图内部的布局。

2、和 padding 的区别：

spacing 是容器内子视图之间的间距。

padding 是视图与其周围内容之间的间距。

当两个视图之间的某个按钮或子视图设定的宽高一致，但两个视图之间的内容无法对齐时，还可能是因为Spacing的影响，有兴趣的可以看一下由于spacing导致两个视图之间按钮无法对齐的问题《Swift View视图未对齐排查全过程》。

相关文章

Swift View视图未对齐排查全过程：https://fangjunyu.com/2024/10/18/swift-view%e8%a7%86%e5%9b%be%e6%9c%aa%e5%af%b9%e9%bd%90%e6%8e%92%e6%9f%a5%e5%85%a8%e8%bf%87%e7%a8%8b/