Начальное выравнивание не относится к тексту SwiftUI

Question

У меня есть следующее

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

Если вы заметили, текст центрирован, я хочу его таким образом, но все начинается с ведение выравнивания, чтобы все они начинались в одной и той же начальной точке. Что я могу исправить там? Я попытался поставить ведущее выравнивание во все стеки: /

Спасибо

Answer 1

Ваш взгляд будет выглядеть как

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

(2) | --- - | длинный текст | ----- | ✏️

(3) | - | действительно длинный текст | - | ✏️

, поэтому вы должны удалить Spacer() между первым Text и второй вместо установленного выравнивания текста.

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