SwiftUI 中，Spacer() 是一个用于布局的视图

在 SwiftUI 中，Spacer() 是一个用于布局的视图，它会占据可用空间并根据周围的视图自动调整自身的大小。Spacer 常用于在 HStack（水平堆叠）、VStack（垂直堆叠）或 ZStack 中创建灵活的间距和对齐方式。

主要功能
分配空间：Spacer 会根据其所在的容器自动扩展或收缩，以填充剩余的空间。
创建间距：通过在视图之间添加 Spacer，可以轻松地在它们之间创建动态的间距。
使用示例
在 HStack 中使用 Spacer

```javascript
import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            Text("左边的视图")
                .padding()
                .background(Color.blue)
                .foregroundColor(.white)
                .cornerRadius(8)

Spacer() // 占据剩余的水平空间

Text("右边的视图")
                .padding()
                .background(Color.red)
                .foregroundColor(.white)
                .cornerRadius(8)
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
```

效果说明：

Text("左边的视图") 和 Text("右边的视图") 分别位于水平堆叠的两端。
中间的 Spacer() 会自动扩展，占据两者之间的所有可用空间，从而将两个文本视图分别推到左右两侧。
在 VStack 中使用 Spacer

```swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("顶部的视图")
                .padding()
                .background(Color.green)
                .foregroundColor(.white)
                .cornerRadius(8)

Spacer() // 占据剩余的垂直空间

Text("底部的视图")
                .padding()
                .background(Color.orange)
                .foregroundColor(.white)
                .cornerRadius(8)
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
```
效果说明：

Text("顶部的视图") 位于垂直堆叠的顶部。
中间的 Spacer() 会自动扩展，占据顶部视图和底部视图之间的所有可用空间。
Text("底部的视图") 固定在底部。
多个 Spacer 的使用
你可以在同一个容器中使用多个 Spacer，它们会根据顺序和容器的大小均匀分配空间。

```swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack(spacing: 0) {
            Text("视图1")
                .padding()
                .background(Color.purple)
                .foregroundColor(.white)
                .cornerRadius(8)

Spacer()

Text("视图2")
                .padding()
                .background(Color.yellow)
                .foregroundColor(.black)
                .cornerRadius(8)

Spacer(minLength: 50) // 最小长度为50

Text("视图3")
                .padding()
                .background(Color.pink)
                .foregroundColor(.white)
                .cornerRadius(8)
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
```
效果说明：

有两个 Spacer，它们会均匀分配中间的空间。
第二个 Spacer 设置了 minLength: 50，表示它至少会占据 50 点的高度（在水平堆叠中表现为宽度），确保视图3与视图2之间至少有 50 点的间距。
Spacer 的属性
frame 相关属性：虽然 Spacer 本身没有太多自定义属性，但你可以通过在其周围添加其他视图或使用容器视图来间接控制其外观。
minLength：可以设置 Spacer 的最小长度，限制其收缩的下限。
总结
Spacer 是 SwiftUI 中一个非常强大的布局工具，能够帮助开发者轻松创建响应式和动态的用户界面。通过合理地使用 Spacer，你可以实现复杂的布局需求，而无需手动计算和设置每个视图的位置和大小。

SwiftUI 中，Spacer() 是一个用于布局的视图

评论0