SwiftUI disable list border iOS 14 [duplicate]

Question

I found the list in SwiftUI iOS 14 will have something like border if the view contained navigationView. Is there any solution to disable the border? Coz the border break the design of my application.

Here is the code that contained no NavigationView inside the code.

struct ContentView: View {
    @State var isPresent = false
    
    var body: some View {
        let first = Restaurant(name: "Joe's Original")
        let second = Restaurant(name: "The Real Joe's Original")
        let third = Restaurant(name: "Original Joe's")
        let restaurants = [first, second, third]
            VStack{
                List(restaurants) { restaurant in
                    Text(restaurant.name)
                }
            }
        }
    }
}

Here is the code that contained NavigationView

struct ContentView: View {
    @State var isPresent = false
    
    var body: some View {
        let first = Restaurant(name: "Joe's Original")
        let second = Restaurant(name: "The Real Joe's Original")
        let third = Restaurant(name: "Original Joe's")
        let restaurants = [first, second, third]
        NavigationView{
            VStack{
                List(restaurants) { restaurant in
                    Text(restaurant.name)
                }

            }
        }
    }
}

The design that I want is the first photo. I have no idea how to disable the border that added into the list iOS14. Any suggestion?

Answer 1

Try to use plain list style explicitly (I assume now they used inset list style by default)

    NavigationView{
        VStack{
            List(restaurants) { restaurant in
                Text(restaurant.name)
            }
            .listStyle(PlainListStyle())     // << here !!
        }
    }