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.

OK. I have a slightly look into your KeysView.swift. There is a major issue with your codes. The body should return to some view, which is one and only view type. However, you just put three HStack together, which would not work. An easy fix would be to wrap the three HStack in a single VStack, which I think is what you intended but forgot to do. In short, you forget to wrap the three HStack in a VStack.

May I have a look on your ContentView.swift?

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 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.

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. 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. 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. 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.