Scrollview alignment - swift

Question

I have the following:
VStack(alignment: .leading) {
ScrollView(.vertical, showsIndicators: false) {
VStack(alignment: .leading, spacing: 30) {
ForEach(0 ..< meals.count) { count in
HStack(alignment: .center,spacing: 120){
VStack{
Text("\(count + 1) ")
.foregroundColor(Color.black)
.padding(.horizontal, 8)
.padding(.vertical, 5)
.background(
Capsule()
.fill(Color.black)
.opacity(0.20)
)
}
VStack{
Text("\(self.meals[count]) ")
.foregroundColor(Color.black)
}
VStack{
Image(systemName: "pencil")
.foregroundColor(Color.black)
.font(.system(size: 20))
.background(Color.yellow)
}
}
}
}
.frame(width: UIScreen.main.bounds.width) // set a fixed width
// .background(Color.green)
}
.frame(height: 185)
.frame(maxWidth: 400)
.padding(.top, -200)
}
How can I make the pencil icon stay to the right? I tried putting alignment: .trailing on it but doesn't work.
I saw an example with geometry but then the scroll view gets weird, I need it with this. Also how can I make sure the width between the items stay the same across devices?

Answer 1

Instead of hardcoding spacing use Spacer() which like spring push subviews aside.
Note: You don't need VStack for only one subview, so it can be removed for simplicity.
Here is resulting row:
HStack { // .center is by default, so also remove
Text("\(count + 1) ")
.foregroundColor(Color.black)
.padding(.horizontal, 8)
.padding(.vertical, 5)
.background(
Capsule()
.fill(Color.black)
.opacity(0.20)
)
Spacer() // << here !!
Text("\(self.meals[count]) ")
.foregroundColor(Color.black)
Spacer() // << here !!
Image(systemName: "pencil")
.foregroundColor(Color.black)
.font(.system(size: 20))
.background(Color.yellow)
}