如何在SwiftUI上对齐VStack上多个项目的列?

如何在SwiftUI上对齐VStack上多个项目的列?,swiftui,alignment,vstack,hstack,Swiftui,Alignment,Vstack,Hstack,在下面的示例中,如果在HStack后面有一个VStack,我如何使HStack的宽度与网格的宽度相同 struct VStackAlignmentView: View { let data = ["a", "b", "cdefghl alalala", "i", "j"] var body: some View { VStack(spacing: 0) {

在下面的示例中,如果在
HStack
后面有一个
VStack
,我如何使
HStack
的宽度与网格的宽度相同

struct VStackAlignmentView: View {
    let data = ["a", "b", "cdefghl alalala", "i", "j"]
    var body: some View {
        VStack(spacing: 0) {
            ForEach (data, id:\.self) { item in
                HStack(alignment: .top) {
                    Text("Column 1")
                    VStack(alignment: .trailing) {
                        Text("Column \(item)")
                        Text("Value 2")
                    }
                    .frame(minWidth: 120)
                    Text("Column 3")
                    Spacer()
                }
            }
        }
    }
}
这是我得到的结果: 第三行的文本向右对齐,但其他行的文本会增加一个空格

我尝试了一种破解
VStack(alignment:.training)
的方法,通过添加一个具有帧宽度的空
文本,它可以工作,但我认为这不是一种优雅的方法

我还尝试使用
alignmentGuide
,但它将视图推到了另一个方向


有人有同样的问题吗?

使用您的代码,我相信这就是您要寻找的:

struct VStackAlignmentView: View {
    let data = ["a", "b", "cdefghl alalala", "i", "j"]
    
    var body: some View {
        VStack(alignment: .center, spacing: 20) {
            ForEach (data, id:\.self) { item in
                HStack(alignment: .top, spacing: 20) {
                    Text("Column 1")
                    VStack(alignment: .center) {
                        Text("Column \(item)")
                        Text("Value 2")
                    }
                    .frame(minWidth: 120)
                    Text("Column 3")
                }
                .frame(maxWidth: .infinity)

            }
        }
        .multilineTextAlignment(.center)
        .frame(maxWidth: .infinity)
    }
}
但如果您只是创建一个网格布局,那么使用懒散的网格会容易得多:

struct VStackAlignmentView2: View {
    let data = ["a", "b", "cdefghl alalala", "i", "j"]
    
    var body: some View {
        LazyVGrid(
            columns: [
                GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible())
            ],
            alignment: .center,
            spacing: 10,
            pinnedViews: [],
            content: {
                ForEach (data, id:\.self) { item in
                    Text(item)
                }
            })
    }
}

我不确定我得到了你想要达到的目标。你能画个素描吗?