SwiftUI 中列表的引荐方式是运用 List 作为控件(相似 UITableView)。一般我们运用列表的时分都有修正布景色或许自定义布景的需求。

起初,你认为像其他控件一样运用 background 就能够了,比如这样:

List {
    Section {
        Text("Item 1")
    }
    Section {
        Text("Item 2")
        Text("Item 3")
        Text("Item 4")
    }
    Section {
        Text("Item 5")
        Text("Item 6")
        Text("Item 7")
    }
}
.background(.pink)

但是你跑起来以后会发现这个布景没起作用。

经过视图调试你会发现,是因为 tableView 控件自带了一个布景,我们自定义的布景在 List 的下面一层,被遮住了,所以没有效果。

SwiftUI Tips:怎么修正 List 布景色(iOS16)

难道就没有一个隐藏 List 布景图层的接口吗?

一问一个不吱声,iOS 16之前还真没有。

SwiftUI Tips:怎么修正 List 布景色(iOS16)

在 iOS 16 上总算良心发现增加了一个 scrollContentBackground(.hidden)

List {
    Section {
        Text("Item 1")
    }
    Section {
        Text("Item 2")
        Text("Item 3")
        Text("Item 4")
    }
    Section {
        Text("Item 5")
        Text("Item 6")
        Text("Item 7")
    }
}
.background(.pink)
.scrollContentBackground(.hidden)

隐藏了原生列表的布景图层以后自定义的布景就能够正常运用了。

SwiftUI Tips:怎么修正 List 布景色(iOS16)

运用图片之类的是也能够的。

SwiftUI Tips:怎么修正 List 布景色(iOS16)


How to change SwiftUI list background color | Sarunw