gutters on sides of List in WatchOS

Question

I'm dipping my toe into SwiftUI and WatchOS for the first time. I'm making good progress, but I can't figure out how to get rid of the black "gutters" on either side of my Image controls. I've tried setting all the backgrounds to white, but the gutter persists.

What property on which view do I need to set to change the color of the gutters to match the background?

SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            Image("cat-1").resizable().scaledToFill().background(Color.white)
            Image("cat-2").resizable().scaledToFit().padding(5).background(Color.white)
            Image("cat-3").resizable().scaledToFit().padding(.top, 5).background(Color.white)
        }.background(Color.white).listStyle(CarouselListStyle())
            .background(Color.white)
    }
}

Answer 1

Try adding a

.listRowPlatterColor(.clear)

put it inside the list like this...

struct ContentView: View {
    var body: some View {
        List {
            Image("cat-1")
                .resizable()
                .scaledToFit()
                .listRowPlatterColor(.clear)
            
            Image("cat-2").resizable().scaledToFit().padding(5).background(Color.white)
            Image("cat-1")
                .resizable()
                .scaledToFit()
                .padding(.top, 5)
                .background(Color.white)
        }
        
        .listStyle(CarouselListStyle())

        
    }
}

I put it in the first item and left it off of the second and third so that you could see the difference. This other question can provide some more details: How to style rows in SwiftUI List on WatchOS? . You should then be able to style it however you like.