How to use Spacer in SwiftUI

在SwiftUI中，Spacer是一个非常有用的视图修饰符，它可以帮助我们实现灵活的布局和自动调整视图间距的效果。

Spacer是一个占用可用空间的视图，它会自动填充剩余空间，使相邻的视图之间产生间距。使用Spacer可以使视图在水平或垂直方向上均匀分布，并根据可用空间自动调整间距。

下面是一个简单的示例，展示了如何使用Spacer在水平方向上创建自适应的布局：

struct SpacerSample: View {
    var body: some View {
        HStack(spacing: nil) {
            Rectangle()
                .fill(Color.blue)
                .frame(width: 50, height: 50)
            
            Spacer()
            
            Rectangle()
                .fill(Color.green)
                .frame(width: 50, height: 50)
        }
        .background(Color.gray)
    }
}

在上述示例中，我们使用Spacer将左侧的视图和右侧的视图分隔开。Spacer会自动占用剩余空间，并在两个文本视图之间创建平均分布的间距。这使得布局在不同屏幕尺寸和设备方向下都能自适应。

我们可以在多添加几个正方形视图, 并且把Spacer的背景色填充上，Spacer默认是透明的。

struct SpacerSample: View {
    var body: some View {
        HStack(spacing: 0) {
            
            Spacer(minLength: 0)
                .frame(height: 8)
                .background(Color.orange)
            
            Rectangle()
                .fill(Color.blue)
                .frame(width: 50, height: 50)
            
            Spacer(minLength: 0)
                .frame(height: 8)
                .background(Color.orange)
            
            Rectangle()
                .fill(Color.green)
                .frame(width: 50, height: 50)
            
            Spacer(minLength: 0)
                .frame(height: 8)
                .background(Color.orange)
            
            Rectangle()
                .fill(Color.purple)
                .frame(width: 50, height: 50)
            
            Spacer(minLength: 0)
                .frame(height: 8)
                .background(Color.orange)
        }
    }
}

Spacer会默认去均分剩余空间。让内部的元素左右或者上下的距离是等距的，Spacer有一个默认最小间距参数 minLength, 这个值默认是8 。

我们创建另一个例子

VStack(spacing: 0) {
            HStack(spacing: 0) {
                Image(systemName: "xmark")
                
                Spacer()
                    .frame(height: 10)
                    .background(Color.orange)
                
                Image(systemName: "gear")
            }
            .font(.title)
            .padding(.horizontal)

            Spacer()
                .frame(width: 10)
                .background(Color.orange)

            Rectangle()
                .frame(height: 60)
        }

在顶部我们使用spacer把图片放在两端，中间使用了一个spacer来占用图片不占用的空间，从而使两个图片分别在两端。

然后添加上下视图，也使用一个spacer把上下两部分视图撑开，去掉spacer的背景色，底下就是实际的效果。是不是和开发中的某些页面很类似

Spacer就这么多了，SwiftUI中的空间虽然不多，但是可以很灵活的组成很多复杂的好看的界面，组成这些界面的很多细节我们也需要明白，才可以把页面布局的更好。

谢谢观看，喜欢就点个赞。👍