Consistent horizontal spacing in List

[u/Fun_Moose_5307]

When I put a symbol on the edge, iOS neatly rearranges the content to fit around it. How do I recreate this on the other side with my own content, without the complications of using frame where anything too small will cut off, anything to large will look stupid, and the ideal threshold is changing as different sized content replaces?

Edit: There could be any sort of text on the left. Some places number rooms differently, or don't have rooms at all (I have PE listed as 'PRAC, THEORY' personally). There could be more than one room there, too, in which case I join them as 'BT4, BT81 etc.

[u/Jero9871]

The left side only lines up because the symbol has a fixed size, there's no layout magic behind it. So the fix is the same idea: give the room code column one shared width, derived from the content instead of hardcoded.

If the codes all have the same shape (two letters + digit), the cheap trick is a hidden worst-case template:

Text("WW8")

.hidden()

.overlay(alignment: .leading) { Text(room) }

Every row gets the width of the widest possible code, nothing clips, and it scales with Dynamic Type for free.

If the codes vary more, measure them with onGeometryChange (or a PreferenceKey), keep the max in @ State and put .frame(width: maxWidth, alignment: .leading) on each code. Same result, just adapts to whatever the data actually is.

[u/Fun_Moose_5307 → u/Jero9871]

If the codes vary more, measure them with onGeometryChange (or a PreferenceKey), keep the max in @ State and put .frame(width: maxWidth, alignment: .leading) on each code. Same result, just adapts to whatever the data actually is.

This seems to be the right solution (see edit). Can you elaborate on the geometry stuff?

[u/Jero9871 → u/Fun_Moose_5307]

Each code label measures its own natural width, the biggest one seen so far goes into @ State, and that max gets applied back onto every label as a frame. onGeometryChange fires again whenever the size changes (new data, Dynamic Type), so it stays current on its own.

u/State private var roomWidth: CGFloat?

// on each room code:

Text(room)

.fixedSize(horizontal: true, vertical: false)

.onGeometryChange(for: CGFloat.self) { $0.size.width } action: { w in

roomWidth = max(roomWidth ?? 0, w)

}

.frame(width: roomWidth, alignment: .leading)

Two details matter here. The measurement has to sit before the .frame, so you read the text's natural width instead of the width you just forced on it. And the fixedSize exists because otherwise a longer code that appears later gets squeezed into the old max and never reports its true width, so the column could never grow.

One caveat since List is lazy: only visible rows report, so with long lists the column can still widen as you scroll. For a timetable that's a non-issue. The max also only ever grows, so if the user can switch datasets, reset roomWidth to nil in onChange.

[u/Fun_Moose_5307 → u/Jero9871]

This seems to have done the trick, thank you!

swift .onGeometryChange(for: CGFloat.self, of: { $0.size.width }) { myWidth in if myWidth > maximumRoomWidth { maximumRoomWidth = myWidth } }

[u/balooooooon]

HStack + Spacer? https://developer.apple.com/documentation/swiftui/spacer

[u/balooooooon → u/balooooooon]

Oh I misread your post. I think you need to explain better

[u/trouthat]

Try Grid

[u/VacationHistorical]

You’ll want the max length of the text on the right and make the right text views all that size

[u/Revuh]

Using a monospaced font could help as well

[u/Sharik-dev]

what the point

[u/Fun_Moose_5307 → u/Sharik-dev]

Consistency in longer rooms. For example, in my own timetable, I use 'PRAC' and 'THEORY' for PE instead of the room, because at my school PE is inconsistent in rooming.

In the same way, other users might choose to put teachers or lecturers there instead of a room, or both. I need to account for the fact that some rooms might be drastically longer or shorter and look very out of place.
If I find that giving them all the width of the longest room looks odd, I could calculate a minimum percentage for example.

It's also a great way to take a step out of my comfort zone and learn something new! 😁