NavigationView Xcode 12

Obj-C? Swift? SwiftUI?
...

Show some code.

I believe you are using swiftUI.

I am having the same issue with my project. When you wrap a List in the NavigationView, a weird padding appears, and the background colours of the List and the NavigationView are slightly different.

I go through a lot of testing and found that if you just wrap the List in NavigationView, it looks absolutely fine, but if you add something like navigationItems. The weird padding appears again.

This is perfectly fine, no weird padding.

Code Block  swift
struct DemoView: some View {
		var body: some View {
				NavigationView {
						List {
								Text("some text")
								Text("some text")
								Text("some text")
								Text("some text")
						}
				}
		}
}

This gets some weird padding, by just adding a navigation bar item.

Code Block  swift
struct DemoView: some View {
		var body: some View {
				NavigationView {
						List {
								Text("some text")
								Text("some text")
								Text("some text")
								Text("some text")
						}
								.navigationBarItems(leading: Text("an item"))
				}
		}
}

And you still get a padding, even if you do not do anything affecting the appearance, like add a popover.

Code Block  swift
struct DemoView: some View {
		@State var showAddItemMenu = false
		var body: some View {
				NavigationView {
						List {
								Text("some text")
								Text("some text")
								Text("some text")
								Text("some text")
						}
								.popover(isPresented: $showAddItemMenu) { addItemMenu }
				}
		}
}

I have no idea why this would happen, it kinda stop me from building my app since the padding is so ugly.

It has been a few days that I come up with an rather dumb solution, which is to add a negative value padding to the list. It looks fine now.

This is my solution

Code Block swift
struct DemoView: View {
		var body: some View {
        NavigationView {
            List {
                Text("Hello, world!")
                Text("Hello, world!")
                Text("Hello, world!")
                Text("Hello, world!")
                Text("Hello, world!")
            }
						/* Add a negative 20 padding here */
            .padding(.horizontal, -20)
            .navigationBarItems(leading: Text("item1"))
				}
		}
}

It still does not solve the gray background issue, but at least it seems to have no padding at all now.
I tested it with iPhone 11 only, not sure if other devices would have the same value of padding.

It is me again. I think I finally found the true reason and a correct fix for the issue.
For a List embedded in a NavigationView, the default listStyle is set to an inset style for some unknown reasons, which in other words, the list is default to have padding around it. In order to solve the issue, just simply add a .listStyle after the List view to set another style which is not inset.

In my case, I use .listStyle(GroupedListStyle()). The padding would be gone now. You may look in the documentation about the listStyle.

Thank you!! That solved my problem. Simply assign the list another style.