ios - Adding shapes in List row of SwiftUI

Question

I am trying to create a List View where rows looks like this:

However, I am unable to align the Circle on the leading side. Tried using Spacer(), HStack within VStack, it just doesn't work. Here's my code and its output.

struct PeopleView: View {
    
    let people = ["Adam", "James"]
    
    var body: some View {
        NavigationView {
            List {
                ForEach(people, id: .self) { person in
                    HStack {
                        Circle()
                        VStack {
                            Text("(person)")
                        }
                    }
                }
            }
            .navigationBarTitle("People", displayMode: .inline)
        }
    }
}

Answer 1

Actually you don't need shape itself in this case, but only as a mask to visually present text in circle.

So the solution can be like following

HStack {
    Text(person.prefix(2).uppercased()).bold()
        .foregroundColor(.white)
        .padding()
        .background(Color.red)
        .mask(Circle())          // << shaping text !!

    Spacer()
    VStack {
        Text("(person)")
    }
}