SwiftUI中如何让无固定宽度父视图裁剪固定宽度子视图

我在VStack（父视图）中嵌套了一个HStack（子视图）。HStack包含数量未知的固定宽度元素，因此它的总宽度也不确定。

我希望按照其“最大允许宽度”（即若HStack内包含Color这类可扩展元素时能达到的宽度），从尾部裁剪HStack的内容（详见示例图示）。

但由于父视图没有固定宽度，VStack会被拉伸至子视图的完整宽度，这可能超出屏幕范围。

import SwiftUI

struct SwiftUITestView: View {
    var body: some View {
        VStack {
            Text("预期效果（视觉）：")
            HStack {
                ForEach(0...5, id: \.self) { number in
                    Color(.blue)
                        .frame(width: 60, height: 60)
                        .cornerRadius(10)
                        .clipped()
                }
                Spacer()
            }
            .frame(maxWidth: 370, alignment: .leading) // <- 不设置这个固定宽度的话就会出现问题...
            .clipped()
            .background(.red)
            .padding(.vertical, 4)
            Text("当前问题：")
            HStack {
                ForEach(0...10, id: \.self) { number in
                    Color(.blue)
                        .frame(width: 60, height: 60)
                        .cornerRadius(10)
                        .clipped()
                }
            }
            .frame(maxWidth: .infinity, alignment: .leading)
            .background(.red)
            .padding(.vertical, 4)
        }
        .padding(8)
        .background(.green)
        VStack {
            Text("HStack和VStack应有的尺寸：")
            HStack {
                Color(.red).frame(height: 60)
            }
            .frame(maxWidth: .infinity, alignment: .leading)
            .background(.red)
            .padding(.vertical, 4)
        }
        .padding(8)
        .background(.green)
    }
}

#Preview {
    SwiftUITestView()
}

要实现按父容器可用宽度裁剪HStack尾部内容，同时避免VStack被过度拉伸，只需给HStack添加两个关键修饰符：

1. 用.frame(maxWidth: .infinity, alignment: .leading)将HStack的最大宽度限制为父容器的可用宽度
2. 加上.clipped()裁剪超出父容器宽度的内容

修改后的问题区域代码示例：

Text("修复后效果：")
HStack {
    ForEach(0...10, id: \.self) { number in
        Color(.blue)
            .frame(width: 60, height: 60)
            .cornerRadius(10)
            .clipped()
    }
}
.frame(maxWidth: .infinity, alignment: .leading)
.clipped() // 裁剪超出父容器宽度的内容
.background(.red)
.padding(.vertical, 4)

如果需要更精确控制可用宽度，也可以借助GeometryReader获取父容器尺寸后再限制HStack宽度：

GeometryReader { geo in
    HStack {
        ForEach(0...10, id: \.self) { number in
            Color(.blue)
                .frame(width: 60, height: 60)
                .cornerRadius(10)
                .clipped()
        }
    }
    .frame(width: geo.size.width, alignment: .leading)
    .clipped()
}
.background(.red)
.padding(.vertical, 4)

以上两种方式都能实现需求：HStack宽度被限制在父容器可用范围内，超出的元素从尾部裁剪，VStack不会被拉伸至超出屏幕范围。

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