How to override the alignment of a VStack if all component don't have fixed frames? - swift

Question

I have an HStack, aligned top, with 3 components. I want the first Text to be pushed to the bottom, essentially overriding the HStack's alignment.
I want the Text to keep its intrinsic size and override its parent's alignment.
HStack(alignment: .top, spacing: 0) {
Text("BOTTOM")
.font(.system(size: 24))
.background {
Color.yellow
}
Spacer()
Text("TOP ")
.background {
Color.blue
}
Spacer()
Text("X")
.font(.system(size: 40))
.background {
Color.green
}
}
.background {
Color.red
}
I can wrap the Text in a VStack and add a Spacer before it but that will only work if
there is a fixed frame height on the Text OR
there is a fixed frame height on the HStack
If I don't have either and still add a Spacer, the Spacer stretches to take up the entire screen height.

Answer 1

Create two HStacks, the outermost aligned to the bottom, while an inner one wraps the second block, aligning everything to the top.
Here:
// Align the whole block to the bottom
HStack(alignment: .bottom, spacing: 0) {
Text("BOTTOM")
.font(.system(size: 24))
.background {
Color.yellow
}
// The sub-block is aligned to the top: create
// a new HStack
HStack(alignment: .top) {
Spacer()
Text("TOP ")
.background {
Color.blue
}
Spacer()
Text("X")
.font(.system(size: 40))
.background {
Color.green
}
}
}
.background {
Color.red
}