WatchOS下SwiftUI List组件两侧Gutter颜色修改咨询

你遇到的黑色Gutter是CarouselListStyle列表的默认侧边背景区域，仅设置background(Color.white)无法覆盖这个区域，需要通过以下调整解决：

核心修改点 #

• 给List添加scrollContentBackground(.hidden)，隐藏系统默认的滚动内容背景
• 确保List的背景色设置能覆盖侧边区域

修改后的代码 #

struct ContentView: View {
    var body: some View {
        List {
            Image("cat-1")
                .resizable()
                .scaledToFill()
                .clipped() // 防止图片超出容器范围
                .background(Color.white)
            
            Image("cat-2")
                .resizable()
                .scaledToFit()
                .padding(5)
                .background(Color.white)
            
            Image("cat-3")
                .resizable()
                .scaledToFit()
                .padding(.top, 5)
                .background(Color.white)
        }
        .listStyle(CarouselListStyle())
        .scrollContentBackground(.hidden) // 关键：隐藏系统默认滚动背景
        .background(Color.white) // 统一设置整个列表区域的背景色
    }
}

原理说明 #

CarouselListStyle的列表侧边Gutter属于滚动视图的背景层，默认使用系统深色背景。通过scrollContentBackground(.hidden)关闭系统默认背景后，我们设置的background(Color.white)就能覆盖包括侧边Gutter在内的整个列表区域，让背景色完全统一。

内容的提问来源于stack exchange，提问作者Jason