Center HStack content excluding content in VStack

I have a pretty basic view with an HStack, that has an Image, VStack, Text, and another Image in it. What I would like for is the speedometer image, the ProgressView (which is in the VStack), the "75" text, and the chevron image to be centered horizontally. Maybe there is a better way to structure this, or some modifier I can apply that I'm not aware of. Again the goal is to have a horizontal row of content that is the Image, ProgressView, Text and an Image centered horizontally with the "Hello" text leading aligned to the ProgressView. Here is a screenshot of its current state and the code.

struct ContentView: View {
    var body: some View {
        HStack(alignment: .lastTextBaseline) {
            Image(systemName: "speedometer")
            VStack(alignment: .leading) {
                Text("Hello")
                ProgressView(value: 50, total: 100)
                    .progressViewStyle(.linear)
            }
            Text("75")
            Image(systemName: "chevron.forward")
        }
        .padding()
    }
}

This is what I want the alignment to look like. What is missing from this screenshot is I want the text "Hello" to be above the ProgressView, and leading aligned:

Solution

There would be a number of ways to achieve this layout. Techniques at your disposal include:

use .padding to shift items into position
use .offset to tweak positions
use fixed sizes for the items
use an .alignmentGuide
use overlays
use hidden content to reserve space
change the .baselineOffset for the Text
change the alignment of the stacks.

Here is a variation that uses a VStack containing two HStack. If the size of the speedometer image would be known then padding could be used to reserve this space. Since it is not known, a hidden version of the image is used instead:

VStack(alignment: .leading, spacing: 0) {
    HStack {
        Image(systemName: "speedometer")
            .hidden()
        Text("Hello")
    }
    HStack {
        Image(systemName: "speedometer")
        ProgressView(value: 50, total: 100)
            .progressViewStyle(.linear)
        Text("75")
        Image(systemName: "chevron.forward")
    }
}
.padding()

Screenshot