SwiftUI - How to remove white background behind List that is styled with SidebarListStyle, in portrait mode

Question

I have a list styled with SidebarListStyle (new in iOS 14) inside a NavigationView.

struct ContentView: View {
    let data = ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten", "Eleven", "Twelve", "Thirteen", "Fourteen"]
    
    var body: some View {
        NavigationView {
            List {
                Section(header: Text("Section")) {
                    ForEach(data, id: \.self) { word in
                        Text(word)
                    }
                }
            }
            .listStyle(SidebarListStyle())
            .navigationBarTitle(Text("Title"), displayMode: .large)
        }
    }
}

The problem is that there is a white rectangle behind each of the rows in the list, but only in portrait mode. It's fine in landscape.

I don't want that white background, anyone know how to remove it? Also, when launching the app, it seems to glitch -- at first it's fine, then it adds the white background.

Weirdly, if I add .navigationViewStyle(StackNavigationViewStyle()) to the NavigationView, the white background disappears and it launches fine.

struct ContentView: View {
    let data = ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten", "Eleven", "Twelve", "Thirteen", "Fourteen"]
    
    var body: some View {
        NavigationView {
            List {
                Section(header: Text("Section")) {
                    ForEach(data, id: \.self) { word in
                        Text(word)
                    }
                }
            }
            .listStyle(SidebarListStyle())
            .navigationBarTitle(Text("Title"), displayMode: .large)
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

Left: How it launches, right: How it looks after launching

↑ This is how I want it to be.

However, now the landscape mode is limited to a full-width list, which I don't want either.

Edit: @Omid's answer

I added a background color to match the default one:

Text(word)
.listRowBackground(Color(UIColor.systemGroupedBackground))

But the launching glitch is still there.

Edit: @pawello2222's answer

Works alright, just a weird transition when rotating.

could you explain more? now you have Row backgroundColor issue or animation on lunch? tell me what you you want happen? — user
I have 2 issues combined in one, kind of. When it launches, the row flickers from a clear to white background. I want it to launch without the flicker, and stay with a clear background. I'll add a gif — aheze
you can not change that fickers it is backed to animation on SwiftUI — user

pawello2222 pawello2222 · Accepted Answer · 2020-11-10T15:12:48

Problem

Weirdly, if I add .navigationViewStyle(StackNavigationViewStyle()) to the NavigationView, the white background disappears and it launches fine.

This is because in iOS 14 the default styles of NavigationView or List are no longer always the same. See:

SwiftUI iOS14 - NavigationView + List - Won't fill space

Solution

You can use a different NavigationStyle depending on the @Environment(\.horizontalSizeClass):

struct CustomNavigationStyle: ViewModifier {
    @Environment(\.horizontalSizeClass) var horizontalSizeClass

    @ViewBuilder
    func body(content: Content) -> some View {
        if horizontalSizeClass == .compact {
            content.navigationViewStyle(StackNavigationViewStyle())
        } else {
            content.navigationViewStyle(DoubleColumnNavigationViewStyle())
        }
    }
}

NavigationView {
    ...
}
.modifier(CustomNavigationStyle())