根据Apple的文档介绍 Spacer是：

一种灵活的空间，可沿其包含的堆栈布局的主轴扩展，或者如果未包含在堆栈中，则可在两个轴上扩展。

那么让我们开始一个创建一个简单的HStack，并且使用可以使用修饰符.frame(maxWidth:maxHeight:alignment:)实现相同的效果。

css 复制代码

struct ContentView: View {
    var body: some View {
        HStack {
            Image(systemName: "checkmark")
            Text("Taylor")
        }
        .border(.blue)
        .padding()
    }
}

1、在前面添加

css 复制代码

struct ContentView: View {
    var body: some View {
        HStack {
            Spacer()
            Image(systemName: "checkmark")
            Text("Taylor")
        }
        .border(.blue)
        .padding()
    }

通过设置maxWidth为.infinity，我们表明容器视图应使用尽可能多的水平空间。

对齐.trailing将确保内容与尾端对齐。

css 复制代码

struct ContentView: View {
    var body: some View {
        HStack {
            Image(systemName: "checkmark")
            Text("Taylor")
        }
        .border(.blue)
        .padding()
        .frame(maxWidth: .infinity, alignment: .trailing)
    }
}

2、在中间添加

css 复制代码

struct ContentView: View {
    var body: some View {
        HStack {
            Image(systemName: "checkmark")
            Spacer()
            Text("Taylor")
        }
        .border(.blue)
        .padding()
    }
}

只需frame在trailing其中之一上使用修饰符并设置所需的对齐方式即可。

css 复制代码

struct ContentView: View {
    var body: some View {
        HStack {
            Image(systemName: "checkmark")
            Text("Taylor")
                .frame(maxWidth: .infinity, alignment: .trailing)
        }
        .border(.blue)
        .padding()
    }
}

3、在尾部添加

css 复制代码

struct ContentView: View {
    var body: some View {
        HStack {
            Image(systemName: "checkmark")
            Text("Taylor")
            Spacer()
        }
        .border(.blue)
        .padding()
    }
}

可以选择使用.leading对齐方式。

css 复制代码

struct ContentView: View {
    var body: some View {
        HStack {
            Image(systemName: "checkmark")
            Text("Taylor")
        }
        .border(.blue)
        .padding()
        .frame(maxWidth: .infinity, alignment: .leading)
    }
}

区别

从视觉上看，两种方法看起来完全相同（如果您忘记了蓝色边框，它只是为了了解所有这些的行为）。但现在，您直接在容器上设置行为，而不是在其中添加额外的灵活组件。

因此，使用.frame修饰符会比 a 节省很多性能Spacer，特别是在列表或长水平/垂直堆栈中。

结论

当然，Spacer在更复杂的组件中仍然有用。但我的建议是，Spacer为了性能成本和可读性，尽量少用。

我也只在我的代码示例中使用HStack这里，但处理与参数和某些或对齐VStack基本相同。maxHeight``.top``.bottom

对于更复杂的组件，您还可以将水平和垂直对齐方式与.topLeading、.topTrailing、.bottomLeading或对齐.bottomTrailing方式结合起来.center。

SwiftUI 的 Spacer 的替代品

区别

结论