如何 "align" 垂直 HStack

Question

我遇到了问题：我正在使用 ForEach 循环在视图中生成自定义视图。我希望它们像这样对齐（我通过在 VStack 中创建 3 个 HStack 来做到这一点）：

The expectation

但我使用 ForEach，因此，我仅限于“1 Stack”。我得到这样的东西：

The problem

这里是只涉及 ScrollView 的代码：

ScrollView(.vertical, showsIndicators: true) {
                    HStack{
                        ForEach(styles, id: \.id) { style in // styles is an array that stores ids.
                            
                            MusicStyleTabView(style: style, selectedBtn: self.$selected)// This view is the "cell" in question.
                            
                        }
                    }
                }

那么如何水平对齐 VStack 呢？

Answer 1

此代码将解决您的问题。

struct ContentView: View {
let gridItems = Array(repeating: GridItem(.flexible(minimum: 60)), count: 2)

var body: some View {
    ScrollView { 
        LazyVGrid(columns: gridItems) {
            ForEach(styles, id: \.id) { style in
                MusicStyleTabView(style: style , selectedBtn: self.$selected)
            }
        }
    }
}

如何 "align" 垂直 HStack

How to "align" vertically a HStack

xcode

swift

swiftui