[SOLVED] How to "align" vertically a HStack


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) {
                        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 ?


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)

Answered By – LeaderKingV

Answer Checked By – Pedro (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *