SwiftUI中HStack内VStack的蓝色背景无法填满剩余空间如何解决

问题原因 #

SwiftUI 的修饰符是按照书写顺序依次生效的，你当前的代码先给 VStack 的内容区域添加了蓝色背景，之后再设置maxWidth: .infinity撑开宽度，撑开的区域并没有被背景色覆盖，所以达不到预期效果。

解决方法 #

调换每个 VStack 上两个修饰符的顺序，先设置frame撑开宽度，再添加背景色即可。同时HStack中的额外Spacer可以删除，三个设置了最大宽度为无穷大的子视图会自动平分HStack的可用宽度，你可以通过HStack的spacing参数自定义三个模块的间距。

修正后的代码如下：

HStack(spacing: 16) { // 可自行调整spacing数值修改模块间距
    VStack {
        Text("Total Yield").padding([.trailing, .leading, .top])
        Text("3.0 oz").padding([.trailing, .leading, .bottom])
    }
    .frame(maxWidth: .infinity)
    .background(Color.blue)

    VStack {
        Text("Ice").padding([.trailing, .leading, .top])
        Text("None").padding([.trailing, .leading, .bottom])
    }
    .frame(maxWidth: .infinity)
    .background(Color.blue)

    VStack {
        Text("Glass").padding([.trailing, .leading, .top])
        Text("Coupe").padding([.trailing, .leading, .bottom])
    }
    .frame(maxWidth: .infinity)
    .background(Color.blue)
}
.padding()

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