Swiftui how to programatically adjust spacing between images and text? - swift

Question

I'm trying to get an aligned text-image pairs in swiftui programmatically. Is it possible?
I want the word "Visit" to start from the same position in both rows.
This is my code:
HStack{
Image(systemName: item.leftImage) // A system image name
Text(item.text) // A text representing the item
}
I know that I can add spacing to the HStack itself, but it won't fix my issue.
Since every systemimage provided by apple has a different sizing, I guess that I should programmatically somehow determine the spacing that should be instantiated between each the image to the text.
How can I do that?

Answer 1

I would recommend to use explicit width for image frame, this will fit any symbol automatically and make it centred
HStack{
Image(systemName: item.leftImage)
.frame(width: 28)
Text(item.text)
}

Answer 2

Give the Image a constant frame, like below:
HStack {
Image(systemName: item.leftImage)
.frame(width: 32)
Text(item.text) // A text representing the item
}

Answer 3

HStack takes Vertical alignment as argument. Then the text and icon is vertical alignment.
HStack(alignment: .center)
{
Image(systemName: item.leftImage) // A system image name
Text(item.text) // A text representing the item
}
To align the text, give the image a frame width. You need to determine they maximum width a image can take.
VStack(alignment: .leading)
{
HStack(alignment: .center)
{
Image(systemName: "pause") // A system image name
.frame(width: 50)
Text("Test") // A text representing the item
}
HStack(alignment: .center)
{
Image(systemName: "cloud") // A system image name
.frame(width: 50)
Text("Test") // A text representing the item
}
}