SwiftUI中VStack子视图空间分配规则探究（含maxHeight:.infinity）

核心布局逻辑 #

VStack的空间分配遵循两步原则：

1. 优先满足所有子视图的固有尺寸（即视图自身需要的最小尺寸，比如Text的文本高度）；
2. 剩余的可用空间，会分配给所有声明了maxHeight: .infinity（表示愿意拉伸填充）的子视图，若多个子视图都符合条件，剩余空间会按默认权重（1:1）均分。

场景1：单个文本子视图 #

VStack(spacing: 0) {
    VStack {
        Text("Top")
           .background(.blue)
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(.red)
    
    VStack {
        Text("Bottom")
           .background(.yellow)
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(.green)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)

你的理解基本正确：

• 外层VStack拿到全屏尺寸后，先计算两个内层VStack的固有高度（就是Text的文本高度，占比极低）；
• 剩余的全屏空间被两个设置了maxHeight: .infinity的子视图均分；
• 最终两个子视图的总高度几乎各占屏幕的50%（固有高度占比可忽略）。

场景2：单个Text直接设置无限高 #

Text("Bottom")
   .frame(maxWidth: .infinity, maxHeight: .infinity)
   .background(.yellow)

• 这里的frame修饰符会让视图填充父视图分配给它的所有可用空间；
• 如果这个Text放在场景1的内层VStack中，父视图（内层VStack）拿到的是外层分配的约50%屏幕高度，所以黄色背景会占满这个高度，而Text会在frame内部垂直居中（Text默认对齐方式为.center）。

场景3：多个文本子视图 #

VStack(spacing: 0) {
    VStack {
        Text("Top1")
        Text("...")
        Text("TopN")
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(.red)
    
    VStack {
        Text("Bottom1")
        Text("...")
        Text("BottomN")
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(.green)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)

底部VStack高度超过50%的原因：

1. 两个内层VStack的固有高度不同（底部包含更多Text，固有高度更大）；
2. 外层VStack先给每个子视图分配它们的固有高度；
3. 剩余的可用空间再按1:1均分；
4. 底部VStack的总高度 = 自身固有高度 + 均分的剩余空间，因为固有高度比顶部大，所以最终总高度会超过屏幕的50%。

举个简单例子：假设屏幕总高度为1000pt，顶部固有高度100pt，底部固有高度200pt，剩余空间700pt，各分350pt。最终顶部总高度450pt，底部550pt，占比55%。

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