如何在SwiftUI中实现类约束式布局？

问题背景 #

习惯UIKit约束驱动布局的开发者，在SwiftUI中难以实现预期的弹性自适应布局，需满足以下需求：

核心布局需求 #

• 常规屏幕下，上下容器占比1:1；
• 顶部容器包含三个固定高度视图，分别靠顶、居中、靠底排列，视图间最小间距20px，空间充足时间距可自动拉伸；
• 小屏设备上，顶部容器收缩至「子视图总高度+最小间距」的最小值，此时上下占比自动调整为类似2:3；
• 大屏设备（如iPad）上，顶部容器最大高度受限，上下占比不再保持1:1；
• 底部容器内视图填满可用空间，同时避免其内容过大时挤压顶部容器至低于最小高度。

现有基础代码 #

VStack(spacing: 0) {
    VStack {
        TopView()
        Spacer()
        CenterView()
        Spacer()
        BottomView()
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(.red)
    
    VStack {
        FillView()
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(.green)
}

实现方案 #

SwiftUI可通过frame(minHeight:maxHeight:)结合layoutPriority实现需求，无需依赖GeometryReader：

完整实现代码 #

假设TopView/CenterView/BottomView的固定高度分别为60、80、60，先定义顶部容器的最小/最大高度：

// 计算顶部容器最小高度：子视图总高度 + 两个最小间距
private let topMinHeight = 60 + 80 + 60 + 20*2
// 顶部容器最大高度：限制为屏幕高度的60%（可根据需求调整）
private let topMaxHeight = UIScreen.main.bounds.height * 0.6

VStack(spacing: 0) {
    // 顶部容器
    VStack(spacing: 20) { // spacing设为最小间距，空间充足时Spacer自动拉伸
        TopView().frame(height: 60)
        Spacer()
        CenterView().frame(height: 80)
        Spacer()
        BottomView().frame(height: 60)
    }
    .frame(
        maxWidth: .infinity,
        minHeight: topMinHeight,
        maxHeight: topMaxHeight
    )
    .background(.red)
    .layoutPriority(1) // 提高布局优先级，确保底部容器不会挤压顶部到低于最小高度
    
    // 底部容器
    FillView()
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(.green)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)

关键逻辑说明 #

• 最小/最大高度约束：通过frame(minHeight:maxHeight:)直接限定顶部容器的高度范围，SwiftUI会自动在该范围内适配；
• 弹性间距实现：内部VStack的spacing设为最小间距20，配合Spacer()，当顶部容器有多余空间时，Spacer自动拉伸，让三个子视图分别靠顶、居中、靠底；
• 布局优先级控制：给顶部容器设置layoutPriority(1)（默认优先级为0），确保底部容器内容过大时，优先满足顶部容器的最小高度要求，避免被挤压；
• 自适应占比逻辑：
  • 常规屏幕：当屏幕高度的一半处于topMinHeight和topMaxHeight之间时，顶部容器自动取屏幕高度的一半，与底部容器实现1:1占比；
  • 小屏设备：当屏幕高度的一半小于topMinHeight时，顶部容器保持最小高度，底部容器占据剩余空间，自动形成动态占比；
  • 大屏设备：当屏幕高度的一半大于topMaxHeight时，顶部容器保持最大高度，底部容器占据剩余空间，占比自动调整。

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