The leading alignment doesn't apply to the text SwiftUI

Question

I have the following

struct hScrollView: View {

    @State private var meals = ["short", "long Text", "really long text"]

    var body: some View {
        VStack(alignment: .leading) {

            ScrollView(.vertical, showsIndicators: false) {
                VStack(spacing: 30) {
                    ForEach(0 ..< meals.count) { count in
                        VStack(alignment: .leading) {
                            HStack(alignment: .center) { // .center is by default, so also remove
                                Text("\(count + 1) ")
                                    .foregroundColor(Color.black)
                                    .multilineTextAlignment(.leading)
                                    .padding(.horizontal, 15)
                                    .padding(.vertical, 5)
                                    .background(
                                        Capsule()
                                            .fill(Color.black)
                                            .opacity(0.20)
                                    )

                                Spacer()

                                Text("\(self.meals[count]) ")
                                    .foregroundColor(Color.black)
                                    .multilineTextAlignment(.leading)

                                Spacer()

                                Button(action: {
                                    print("Button was tapped")
                                }) {
                                    Image(systemName: "pencil")
                                    .foregroundColor(Color.yellow)
                                    .font(.system(size: 25, weight: .bold))
                                    .shadow(radius: 1)
                                }
                            }
                        }
                        .padding(.horizontal)
                    }
                }
                .frame(width: UIScreen.main.bounds.width) // set a fixed width

            }
            .frame(height: 500)
            .frame(maxWidth: 400)
            .padding(.top, 190)
        }
    }
}

If you noticed, the text is centered, I want it that way, but all beginning with .leading alignment so they all start at the same start point. What can I fix there? I tried putting the leading alignment in all the stacks :/

Thanks

Answer 1

Your view would be like

(1)|-------|short|-------|✏️

(2)|-----|long text|-----|✏️

(3)|-|really long text|-|✏️

so you should remove the Spacer() between the first Text and second instead of set text alignment.

HStack(alignment: .center) { // .center is by default, so also remove
                            Text("\(count + 1) ")
                                .foregroundColor(Color.black)
                                .multilineTextAlignment(.leading)
                                .padding(.horizontal, 15)
                                .padding(.vertical, 5)
                                .background(
                                    Capsule()
                                        .fill(Color.black)
                                        .opacity(0.20)
                                )

                            // Spacer() 

                            Text("\(self.meals[count]) ")
                                .foregroundColor(Color.black)
                                .multilineTextAlignment(.leading)

                            Spacer()

                            Button(action: {
                                print("Button was tapped")
                            }) {
                                Image(systemName: "pencil")
                                .foregroundColor(Color.yellow)
                                .font(.system(size: 25, weight: .bold))
                                .shadow(radius: 1)
                            }
                        }