The leading alignment doesn't apply to the text SwiftUI - swift

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