I have a basic List row I am building that has a large number on the leading edge followed by a title and subtitle next to it:
I started with a simple implementation, like so:
HStack {
Text("26")
.font(.title)
VStack(alignment: .leading) {
Text("Some title")
.font(.body)
.bold()
Text("Some subtitle")
.font(.caption)
}
}
However, because different numbers have different widths my alignment is less than ideal when viewed in the List:
To correct this I ended up using a GeometryReader to grab the height of the row, pad it by 20%, and set that as the width of the number text, like so:
GeometryReader { geometry in
HStack {
Text("26")
.font(.title)
.frame(width: geometry.size.height * 1.2)
VStack(alignment: .leading) {
Text("Some title")
.font(.body)
.bold()
Text("Some subtitle")
.font(.caption)
}
}
}
This works!
However, this approach feels kludgy.
My question to you, dear forum frequenters: Is there a better way? Perhaps using alignment guides or another tool I'm not yet aware of?