Quick Tip Icon
Quick Tip

Adjust List row separator insets

Starting from iOS 16 list row separators in SwiftUI are aligned by default to the leading text in the row, if text is present. It's different from the iOS 15 behavior, where the insets of the separator don't adjust to the content of the row.

Screenshots of list row separators in iOS 16 and iOS 15 showing that in iOS 16 the insets are aligned to the leading text

We also have some new SwiftUI APIs for customizing the insets of the separator.

Integrating SwiftUI into UIKit Apps by Natalia Panferova book coverIntegrating SwiftUI into UIKit Apps by Natalia Panferova book cover

Check out our book!

Integrating SwiftUI into UIKit Apps

Integrating SwiftUI intoUIKit Apps

A detailed guide on gradually adopting SwiftUI in UIKit projects.

  • Discover various ways to add SwiftUI views to existing UIKit projects
  • Use Xcode previews when designing and building UI
  • Update your UIKit apps with iOS 16 features such as Swift Charts and Lock Screen widgets
  • Migrate larger parts of your apps to SwiftUI while reusing views and controllers built in UIKit

Using listRowSeparatorLeading horizontal alignment guide, we can align the leading end of the row separator with any other horizontal guide of a view.

List(events) { event in
    HStack {
        DateLabel(date: event.date)
        EventNameLabel(name: event.name)
            .alignmentGuide(
                .listRowSeparatorLeading
            ) { dimensions in
                dimensions[.leading]
            }
    }
}

If we need to adjust the trailing inset of the separator, we can use listRowSeparatorTrailing alignment guide.

List(events) { event in
    HStack {
        EventNameLabel(name: event.name)
        Spacer()
            .alignmentGuide(
                .listRowSeparatorTrailing
            ) { dimensions in
                dimensions[.trailing]
            }
        DateLabel(date: event.date)
    }
}