SwiftUI Spacer

沿其包含堆栈布局的主轴扩展的灵活空间,如果不包含在堆栈中,则在两个轴上扩展。
iOS 13.0+iPadOS 13.0+macOS 10.15+Mac Catalyst 13.0+tvOS 13.0+watchOS 6.0+

分隔符创建了一个自适应视图,其中没有尽可能多地扩展的内容。 例如,当放置在 HStack 中时,spacer 会在堆栈允许的范围内水平扩展,在堆栈大小的限制内将兄弟视图移开。SwiftUI 将不包含分隔符的堆栈调整为堆栈子视图内容的组合理想宽度。

以下示例提供了一个简单的清单行来说明如何使用 Spacer:

struct ChecklistRow: View {
    let name: String

    var body: some View {
        HStack {
            Image(systemName: "checkmark")
            Text(name)
        }
        .border(Color.blue)
    }
}
一个蓝色矩形边框的图形,标志着一个边界

在图像之前添加一个分隔符会创建一个没有内容的自适应视图,该视图会展开以将图像和文本推送到堆栈的右侧。 堆栈现在也展开以占用父视图允许的尽可能多的空间,由指示堆栈边界的蓝色边框显示:

struct ChecklistRow: View {
    let name: String

    var body: some View {
        HStack {
            Spacer()
            Image(systemName: "checkmark")
            Text(name)
        }
        .border(Color.blue)
    }
}
一个蓝色矩形边框的图形,标志着一个边界

移动图像和名称之间的分隔符会将这些元素分别推送到 HStack 的左侧和右侧。 因为堆栈包含间隔,它会扩展以占用父视图允许的尽可能多的水平空间; 蓝色边框表示其大小:

struct ChecklistRow: View {
    let name: String

    var body: some View {
        HStack {
            Image(systemName: "checkmark")
            Spacer()
            Text(name)
        }
        .border(Color.blue)
    }
}
一个蓝色矩形边框的图形,标志着一个边界

在堆栈外部添加两个间隔视图使图像和文本保持在一起,而堆栈扩展以占用父视图允许的尽可能多的水平空间:

struct ChecklistRow: View {
    let name: String

    var body: some View {
        HStack {
            Spacer()
            Image(systemName: "checkmark")
            Text(name)
            Spacer()
        }
        .border(Color.blue)
    }
}
一个蓝色矩形边框的图形,标志着一个边界