While using Claude to write some new SwiftUI code, I spent a disappointing amount of time yesterday trying to figure out why the separators between my List rows didn’t align consistently on the left, and flowed all the way off the right of my screen. Sadly, the LLM kept going in loops, and didn’t know the answer all on its own.
When the LLM gets in a spot like this, it’s time to pull out the old google search skills. I found these blog posts covering precisely my struggle:
https://nilcoalescing.com/blog/AdjustListRowSeparatorInsets
In short, it turns out iOS 16+ Automatically adjusts list separator styles to align with the left edge of the text content the row item contains. In my case, I’d centered the text in each row, so each separator started at a different left offset.
(If you know why this iOS behavior would be useful, please let me know in the comments. I don’t know.)
The solution for me to get those separators looking consistent again was to add a couple of .alignmentGuide modifiers to the view:
.alignmentGuide(.listRowSeparatorLeading) { _ in
return 0 // This aligns the separator to the leading edge
}
.alignmentGuide(.listRowSeparatorTrailing) { dimensions in
return dimensions.width // This extends the separator to the trailing edge
}