如何让宽度超出父视图的SwiftUI HStack靠左对齐？

要让超宽的HStack从"haha1"开始靠左展示，你可以通过以下两种方式实现：

方法1：给HStack设置左对齐的frame #

给HStack添加frame(maxWidth: .infinity, alignment: .leading)，让它占满父容器宽度并左对齐内容：

struct WidgetEntryView : View {
    var entry: Provider.Entry
    
    var body: some View {
        ZStack {
            Color(.red)
            HStack {
                Text("haha1")
                    .frame(width: 50)
                Text("haha2")
                    .frame(width: 50)
                Text("haha3")
                    .frame(width: 50)
                Text("haha4")
                    .frame(width: 50)
                Text("haha5")
                    .frame(width: 50)
                Text("haha6")
                    .frame(width: 50)
                Text("haha7")
                    .frame(width: 50)
                Text("haha8")
                    .frame(width: 50)
            }
            .frame(maxWidth: .infinity, alignment: .leading) // 添加左对齐配置
        }
    }
}

方法2：修改ZStack的对齐方式 #

将ZStack的默认对齐方式改为.leading，内部的HStack会直接靠左排列：

struct WidgetEntryView : View {
    var entry: Provider.Entry
    
    var body: some View {
        ZStack(alignment: .leading) { // 修改ZStack对齐方式
            Color(.red)
            HStack {
                Text("haha1")
                    .frame(width: 50)
                Text("haha2")
                    .frame(width: 50)
                Text("haha3")
                    .frame(width: 50)
                Text("haha4")
                    .frame(width: 50)
                Text("haha5")
                    .frame(width: 50)
                Text("haha6")
                    .frame(width: 50)
                Text("haha7")
                    .frame(width: 50)
                Text("haha8")
                    .frame(width: 50)
            }
        }
    }
}

两种方法都能实现需求：HStack从"haha1"开始靠左展示，超出Widget宽度的部分会被自动裁剪。

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