SwiftUI list separator behavior in iOS 16

Question

I've noticed that list separators in iOS 16 are behaving more like normal table views, but I've found a few instances where they don't seem to be working properly.

They seem to start wherever they find a text object. In most circumstances, this is fine, but I have a use case where this doesn't look good, where I have some text in a ZStack inside a circle.

Does anyone know a workaround?

struct ContentView: View {
    var numbers = 1...10
    var body: some View {
        List
        {
            Section("Images") {
                ForEach(numbers, id: \.self) { number in
                    HStack {
                        Image(systemName: "\(number).circle")
                        Text(String(number))
                    }
                }
            }
            
            Section("Circles") {
                ForEach(numbers, id: \.self) { number in
                    HStack {
                        ZStack {
                            Circle()
                                .strokeBorder(.black, lineWidth: 2)
                                .frame(width: 20, height: 20)
                            Text(String(number))
                                .font(.caption)
                        }
                        Text(String(number))
                    }
                }
            }
        }
        .listRowInsets(EdgeInsets())
        .padding()
    }
}

Answer 1

You can override the default behavior by setting the .listRowSeparatorLeading alignment guide on the view you want the divider to be aligned to. For example .alignmentGuide(.listRowSeparatorLeading) { $0[.leading] } will align the divider leading to whatever view you add the modifier to.

So in your case:

@available(iOS 16, *)
struct ContentView: View {

    var numbers = 1...10

    var body: some View {
        List {
            Section("Images") {
                ForEach(numbers, id: \.self) { number in
                    HStack {
                        Image(systemName: "\(number).circle")
                            .alignmentGuide(.listRowSeparatorLeading) { $0[.leading] }
                        Text(String(number))
                    }
                }
            }
        }
    }
}