HStack嵌入VStack后元素宽度异常，如何恢复等宽效果？

我编写了如下代码，实现了父View为全屏宽度时HStack内元素宽度相等的效果：

HStack(alignment: .center, spacing: 0) {
    ForEach(0...6, id: \.self) { _ in
        Color(UIColor.white.withAlphaComponent(0.1))
            .cornerRadius(5)
            .padding(2)
            .frame(minWidth: 0, maxWidth: .infinity)
            .frame(minHeight: 0, maxHeight: .infinity)
    }
}
.frame(minWidth: 0, maxWidth: .infinity)
.frame(height: 70)

正常效果示意图：

但当我将Color视图替换为包含顶部居中Text("T")的VStack视图后，元素宽度出现异常，代码如下：

HStack(alignment: .center, spacing: 0) {
    ForEach(0...6, id: \.self) { _ in
        VStack(alignment: .center) {
            Text("T")
        }
        .background(Color(UIColor.white.withAlphaComponent(0.1)))
        .cornerRadius(5)
        .padding(2)
        .frame(minWidth: 0, maxWidth: .infinity)
        .frame(minHeight: 0, maxHeight: .infinity)
    }
}
.frame(minWidth: 0, maxWidth: .infinity)
.frame(height: 70)

异常效果示意图：

请问出现该问题的原因是什么？如何让带有"T"的矩形视图保持原有的尺寸？

原因分析 #

SwiftUI的布局约束是从内向外传递的：

• 原始代码里的Color是可扩展视图，会自动填满父视图分配的所有可用空间。
• 替换成VStack后，内部的Text("T")是固有尺寸视图，只会占自身内容需要的空间。此时VStack默认贴合Text的尺寸，后续的.frame修饰符虽然试图让它扩展，但VStack的布局已经被内部Text限制，无法完全填充HStack分配的均等宽度。
• 另外，.background是依附在VStack的实际尺寸上的，所以背景色只会跟着VStack的大小走，不会主动扩展。

解决方法 #

调整修饰符的顺序，让VStack先获得可扩展的布局约束，再添加背景和样式：

修正后的代码 #

HStack(alignment: .center, spacing: 0) {
    ForEach(0...6, id: \.self) { _ in
        VStack(alignment: .center) {
            Text("T")
        }
        .frame(minWidth: 0, maxWidth: .infinity)
        .frame(minHeight: 0, maxHeight: .infinity)
        .background(Color(UIColor.white.withAlphaComponent(0.1)))
        .cornerRadius(5)
        .padding(2)
    }
}
.frame(minWidth: 0, maxWidth: .infinity)
.frame(height: 70)

也可以合并尺寸修饰符，写法更简洁：

HStack(alignment: .center, spacing: 0) {
    ForEach(0...6, id: \.self) { _ in
        VStack {
            Text("T")
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(UIColor.white.withAlphaComponent(0.1)))
        .cornerRadius(5)
        .padding(2)
    }
}
.frame(maxWidth: .infinity)
.frame(height: 70)

核心逻辑是先让VStack占据HStack分配的全部可用空间，再基于这个尺寸添加背景和样式，这样背景色会填满整个分配区域，内部的Text保持居中，最终实现和原始Color视图一致的均等宽度效果。

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