SwiftUI Tips:如何修改 List 背景色(iOS16)

SwiftUI 中列表的推荐方式是使用 List 作为控件(类似 UITableView)。通常我们使用列表的时候都有修改背景色或者自定义背景的需求。

起初,你以为像其他控件一样使用 background 就可以了,比如这样:

swift 复制代码
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 的下面一层,被遮住了,所以没有效果。

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

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

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

swift 复制代码
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)

隐藏了原生列表的背景图层以后自定义的背景就可以正常使用了。

使用图片之类的是也可以的。


How to change SwiftUI list background color | Sarunw

相关推荐
HarderCoder39 分钟前
SwiftUI 可复用视图设计解剖:从语义到 API 的完整实践
swiftui·swift
东坡肘子40 分钟前
当灵感跑在了结果前面 -- 肘子的 Swift 周报 #145
人工智能·swiftui·swift
霍霍哈嗨5 天前
swiftUI框架基础
ios·swiftui·swift
东坡肘子7 天前
当每一次写入都有了新价格 -- 肘子的 Swift 周报 #144
人工智能·swiftui·swift
CHB14 天前
uni-app x 蒸汽模式 iOS版 性能测试基准报告 Benchmark
ios·uni-app·swiftui
大熊猫侯佩14 天前
SwiftUI 侦探笔记:iPhone 14 失踪的“刘海”与侯佩的像素诡计
swiftui·swift·apple
大熊猫侯佩14 天前
WWDC26 新 @ContentBuilder 修饰符:SwiftUI 终于有了户口本
swiftui·swift·wwdc
东坡肘子14 天前
当 Linux 成为“空气”:容器、Agent 与不再重要的“桌面之争” -- 肘子的 Swift 周报 #143
人工智能·swiftui·swift
东坡肘子21 天前
SPI 加入 Apple,Swift 迈向自举 -- 肘子的 Swift 周报 #142
人工智能·swiftui·swift
神奇的程序员1 个月前
开发了一个进阶版Apple健康
swiftui·apple·apple watch