If you'd like to see a more media-rich version of this question, I've posted a gist with images here: https://gist.github.com/MrRooni/3ce8e377e21f424299b69b945f973092
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:
image
I started with a simple implementation, like so:
However, because different numbers have different widths my alignment is less than ideal when viewed in the List:
image
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:
This works!
image
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?
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:
image
I started with a simple implementation, like so:
Code Block swift 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:
image
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:
Code Block swift 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!
image
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?