swiftui - 如何在 SwiftUI 的 VStack 上对齐多个项目的列？

Question

在下面的示例中，如果我有 a follow 的VStacka HStack，我怎样才能使HStackfollow 的宽度与grid相同？

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()
                }
            }
        }
    }
}

这是我得到的结果： 第 3 行的文本向右对齐，但其他行添加了一个空格

我已经尝试通过在框架宽度上VStack(alignment: .trailing)添加一个空白Text来解决这个问题，并且它可以工作，但我认为这不是一种优雅的方式。

我也尝试过使用alignmentGuide，但它会将视图推向其他方式。

有同样问题的人吗？

Answer 1

使用你的代码，我相信这就是你要找的：

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)
    }
}

但是如果你只是创建一个网格布局，使用 LazyGrid 会容易得多：

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)
                }
            })
    }
}