Responsive text box with GeometryReader - swift

Question

I'm trying to create responsive changes to some view parameters (e.g. font size, container box size) based on how much of a given space a text element is occupying at a given moment. The text must also be pushed to the right side of the space, which I'm accomplishing by grouping it with a Spacer() inside an HStack. Because of the space-greediness (and a related behavior I don't understand) of GeometryReader, I'm having a hard time getting the sizing variables I need without breaking the intended structure and behavior of the view.
Here's a version of the view without the responsive changes. The text appears where it should within the rounded rectangle:
struct responsiveTextBox: View {
#State var text = "Hi. "
var body: some View {
VStack {
ZStack{
RoundedRectangle(cornerRadius: 5)
.stroke()
HStack {
Spacer()
Text(text)
}
}
.frame(width: 300, height: 100)
Button("Add text") {
text += "Hi. "
}
Button("Erase text") {
text = ""
}
}
}
}
In order to implement functionality that responds to the relative amount of space occupied by the text, I need to know the size of either the Spacer() element or the Text() element itself. Wrapping the Spacer() in a GeometryReader doesn't work, because unlike the Spacer alone, the GeometryReader won't shrink to less than 50% of the HStack's width:
[...]
HStack {
GeometryReader() {freeSpace in
Spacer()
}
Text(text)
}
[...]
I don't really understand this behavior.
The alternative - wrapping the Text() element in a GeometryReader - also doesn't work, because the GeometryReader's space-greediness overrides the Spacer's, and the text appears on the left side of the rounded rectangle.
HStack {
Spacer()
GeometryReader() {textSpace in
Text(text)
}
}
What's the right way to do this?

Answer 1

In cases like these you can use GeometryReader in an overlay or background of the element you are interested in – so it does not affect the layout.
IMHO you also don't need the Spacer or HStack, just set the alignment on ZStack.
And ultimately you might want to look into the new Layout protocol. It seems to be the way to go for what you want to achieve. Example here
struct ContentView: View {
#State var text = "Hi. "
#State var textSize = CGSize.zero
var body: some View {
VStack {
ZStack(alignment: .trailing) {
RoundedRectangle(cornerRadius: 5)
.stroke()
Text(text)
.id(text)
.background( GeometryReader { geo in Color.clear.onAppear { textSize = geo.size }})
}
.frame(width: 300, height: 100)
Button("Add text") {
text += "Hi. "
}
Button("Erase text") {
text = ""
}
Text("Width: \(textSize.width), Height: \(textSize.height)")
}
}
}