SwifUI - Aligning items in a list

user_1421884 0
Viewed 33

I'm trying to align a row in a list but can't work out the order that I need to place items in to get the desired results.

My current code is

HStack {
    Image(imageName ?? "")
        .renderingMode(.original)
        .resizable()
        .scaledToFit()
        .frame(height: 72.0)
    Text("**1**")
    VStack {
        Text("2")
        Text("3")
        Text("4")
    }
    VStack {
        Text("5")
        Text("6")
    }
}

Currently this is giving me the below layout

enter image description here

But I'm trying to make it look like this

enter image description here

swiftui
2 Answers

This is what you need:

 struct ContentView: View {
    var body: some View {
        List {
            HStack(spacing: 20.0) {
                Image(systemName: "swift")
                    .resizable()
                    .scaledToFit()
                    .frame(height: 72.0)
                VStack(alignment: .leading) {
                    Text("Name")
                        .bold()
                    HStack(alignment: .top) {
                        VStack {
                            Text("2")
                            Text("3")
                            Text("4")
                        }
                        VStack {
                            Text("5")
                            Text("6")
                        }
                    }
                }
            }
        }
    }
}

enter image description here

user_138999570

You just need more stacks to wrap things, like

demo

    HStack {
        Image("picture")
            .renderingMode(.original)
            .resizable()
            .scaledToFit()
            .frame(height: 72.0)
        VStack(alignment: .leading) {     // << here !!
            Text("Name").bold()
            HStack(alignment: .top) {     // << here !!
                VStack {
                    Text("2")
                    Text("3")
                    Text("4")
                }
                VStack {
                    Text("5")
                    Text("6")
                }
            }
        }
    }

Tested with Xcode 14 / iOS 16

user_122990300
Related