I've got a problem : I am using a ForEach loop to generate a custom view in a view. I want them to be align like this (I've made this by creating 3 HStack inside a VStack):

The expectation

But I use ForEach, as a consequence, I am restricted to only "1 Stack". I'm getting something like this :

The problem

Here is the code that concerns only the 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.
                            
                        }
                    }
                }

So how can I align horizontally a VStack ?

CodePudding user response：

this code is going to solve your problem.

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