SwiftUI中是否有更优方式替代重复使用Spacer实现比例布局？

一、iOS 16+：使用Spacer(weight:)（最接近Flexbox的flex属性） #

SwiftUI在iOS 16及以上版本为Spacer新增了weight参数，完全对应Flexbox中通过flex值分配空间的逻辑，能精准控制各区域的比例：

示例1：将View置于屏幕1/3高度位置（与你原代码效果一致）

var body: some View {
    VStack {
        // 上方空间占1份
        Spacer(weight: 1)
        Text("I like chipotle")
        // 下方空间占2份
        Spacer(weight: 2)
    }
}

示例2：将View置于屏幕1/6高度位置

只需调整weight的比例，让上方空间占1份，下方占5份即可：

var body: some View {
    VStack {
        Spacer(weight: 1)
        Text("I like chipotle")
        Spacer(weight: 5)
    }
}

二、iOS 15及以下兼容方案 #

如果需要适配更低版本，可以借助GeometryReader获取父视图尺寸，直接计算并分配空间比例：

示例：实现1/6高度位置的布局

var body: some View {
    GeometryReader { geo in
        VStack {
            // 上方空间高度 = 屏幕总高度 * 1/6
            Color.clear.frame(height: geo.size.height / 6)
            Text("I like chipotle")
            // 下方空间占据剩余高度
            Spacer()
        }
    }
    // 确保GeometryReader充满整个屏幕
    .ignoresSafeArea()
}

三、让View直接占据顶部指定比例区域 #

如果你的需求是让View本身占据屏幕顶部1/6的高度（而非仅位置在该区域），可以用以下方式：

var body: some View {
    GeometryReader { geo in
        VStack(spacing: 0) {
            Text("I like chipotle")
                .frame(width: geo.size.width, height: geo.size.height / 6)
                .background(Color.gray.opacity(0.2)) // 可视化区域范围
            Spacer()
        }
    }
    .ignoresSafeArea()
}

内容的提问来源于stack exchange，提问作者joshpetit