如何让Spacer()收缩以保持Rectangle位置固定

要实现你要的效果，把原来的单VStack拆成嵌套的两个VStack，让顶部区域（Text+Spacer）和底部区域（Rectangle+Spacer）各自分配可用空间，只有当Text内容撑满顶部区域后，才会向下推动Rectangle。

代码实现 #

VStack(spacing: 0) {
    // 顶部区域：Text 优先占据所需空间，剩余空间由 Spacer 填充
    VStack(spacing: 0) {
        Text("Hello")
            .frame(maxWidth: .infinity, alignment: .top)
        Spacer(minLength: 0)
    }
    .frame(maxHeight: .infinity, alignment: .top)
    
    // 底部区域：Rectangle 固定在区域顶部，剩余空间由 Spacer 填充
    VStack(spacing: 0) {
        Rectangle()
            .frame(width: 50, height: 50)
        Spacer(minLength: 0)
    }
    .frame(maxHeight: .infinity, alignment: .top)
}

原理说明 #

• 外层VStack将父视图的垂直空间平分为上下两个区域，每个区域通过frame(maxHeight: .infinity)占据尽可能多的空间。
• 当Text内容较短时，顶部区域的Spacer会填充剩余空间，让Rectangle稳定在父视图的中间位置。
• 当Text内容变长到撑满整个顶部区域时，顶部区域的高度会被Text撑开，挤压底部区域的空间，Rectangle便会随之下移。

如果需要调整Rectangle的初始固定位置（比如靠近底部），可以给底部区域的frame设置固定的maxHeight，例如.frame(maxHeight: 200, alignment: .top)，这样Rectangle初始位置会距离底部200pt，只有当Text内容超过父视图高度-200pt时才会被推动。

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