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.

Answer 1

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())

Answer 2

you can change the color to what you want!

Text(word)
  .listRowBackground(Color.yellow)