Spacer 的基本概念

Spacer 是一个无形的视图，它会在布局中占据尽可能多的可用空间。

你可以将它放置在 HStack、VStack 或 ZStack 中，用来调整视图之间的间距。

Spacer 的使用方法

在 HStack 中使用 Spacer

Spacer 可以在水平堆叠（HStack）中推开视图，使它们沿着水平轴对齐。

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            Text("Left")
            Spacer()
            Text("Right")
        }
        .padding()
    }
}

在这个例子中，Spacer 会在 "Left" 和 "Right" 文本之间占据所有可用空间，将 "Left" 推到左侧，将 "Right" 推到右侧。

在 VStack 中使用 Spacer

Spacer 也可以在垂直堆叠（VStack）中使用，用于将视图推向顶部或底部。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Top")
            Spacer()
            Text("Bottom")
        }
        .padding()
    }
}

在这个例子中，Spacer 会将 "Top" 推到顶部，将 "Bottom" 推到底部。

组合多个 Spacer

你可以组合多个 Spacer 来创建更加复杂的布局。多个 Spacer 会平分它们之间的可用空间。

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            Text("Left")
            Spacer()
            Text("Center")
            Spacer()
            Text("Right")
        }
        .padding()
    }
}

在这个例子中，有两个 Spacer，它们会平分剩余空间，将 "Center" 视图放置在水平中间。

Spacer 在不同布局中的应用

在 VStack 中创建等间距布局：

在 VStack 中使用多个 Spacer 可以创建视图之间等间距的布局。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Spacer()
            Text("Top")
            Spacer()
            Text("Middle")
            Spacer()
            Text("Bottom")
            Spacer()
        }
    }
}

在 HStack 中创建按钮布局：

使用 Spacer 将按钮推到 HStack 的两端。

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            Button("Cancel") { }
            Spacer()
            Button("OK") { }
        }
        .padding()
    }
}

与其他布局组件结合使用

Spacer 通常与其他布局组件（如 VStack、HStack、ZStack）结合使用，以创建更复杂的用户界面。

示例：VStack 与 Spacer 组合使用

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Header")
            Spacer()
            Text("Content")
            Spacer()
            Text("Footer")
        }
        .padding()
    }
}

这个示例中，Spacer 会将 "Header" 和 "Footer" 分别推到垂直布局的顶部和底部，而 "Content" 会保持在中间。

小结：

Spacer是一个无形的视图，用于占据布局中的可用空间。
HStack和VStack：在水平和垂直堆叠中，Spacer可以调整视图的对齐方式，推开其他视图。
组合使用：多个Spacer可以平分它们之间的空间，用于创建复杂布局。
响应式布局：Spacer非常适合创建响应式布局，确保视图在不同屏幕尺寸下表现良好。

通过合理使用Spacer，你可以有效地管理布局中的空白空间，使用户界面更加灵活和直观。

SwiftUI-如何使用 Spacer