SwiftUI List Separator within NavigationView Problem

I'm note sure if this is well-known-issue or not but it is very odd. The problem can be reproduced with Apple's example code navigationBarItems(leading:trailing:) As you can see, list separators has extra leading space that looks like they are indented for some reason.

I test above code with Playground, iPhone 13/15.3.1 they are the same.

I did messing around the code and found that applying .navigationBarTitle(), .navigationBarItems() to List causes the problem. They must apply to each List item. Very odd though. This means almost all List sample code that wrapping with NavigationView are WRONG. Here is a fix I found.

Although I'm not sure if I can call this is a bug but definitely either document or implementation is wrong. Could anyone explain this?

Now check the view hierarchy and see how many navbar titles and bar items you might have compared to the first example where they're just added once outside of the list. Use Swift Application playgrounds for SwiftUI and not the original playgrounds

Yeah, I know it. So you're saying indented separator is correct behavior of SwiftUI List in NavigationView?

Got help on StackOverflow Link Here. Just adding .listStyle(PlainListStyle()) to List solved the problem.

        NavigationView {
            List {
                Text("Chocolate")
                Text("Vanilla")
                Text("Strawberry")
            }
            .navigationBarTitle(Text("Today‘s Flavors"))
            .navigationBarItems(leading:
                HStack {
                    Button("Hours") {
                        print("Hours tapped!")
                    }
                }, trailing:
                HStack {
                    Button("Favorites") {
                        print("Favorites tapped!")
                    }

                    Button("Specials") {
                        print("Specials tapped!")
                    }
                }
            )
            .listStyle(PlainListStyle()) // <- Add this
        }

You don't need to use a specific .plaint style, but you need to apply ANY (whatever you want) style to the list and then everything will be ok.

The problem was that List was defaulting to a .sidebar list style which caused the separators to be inset as if there was a symbol image there. This could be fixed by manually changing to another list style.

This has since been resolved in iOS 16, and the ability to modify separator insets has been added.

What I think is interesting, is that the divider seems to be based off of Text elements. It will stretch from the right edge of the screen to the leading edge of the left-most Text element. So if the row begins with, say, a Circle, it won't cover that. Remove the circle and have the text go further left, the divider follows. (In this case the view I have with the Circle is used as the label for the NavigationLink). I would have expected the length of the divider to always be the same, and am not sure if what I'm seeing is correct or not.

SwiftUI List Separator within NavigationView Problem
 
 
Q