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

相关推荐
用户79457223954131 天前
【Lottie】让设计稿上的动效直接"活"在 App 里
swiftui·swift
用户79457223954133 天前
【SnapKit】优雅的 Swift Auto Layout DSL 库
swiftui·swift
Mr_Tony3 天前
iOS / SwiftUI 输入法(键盘)布局处理总结(AI版)
ios·swiftui
东坡肘子4 天前
苹果的罕见妥协:当高危漏洞遇上“拒升”潮 -- 肘子的 Swift 周报 #130
人工智能·swiftui·swift
曾经我也有梦想10 天前
SwiftUI 如何使用 UIKit 组件
swiftui
东坡肘子11 天前
一墙之隔,不同的时空 -- 肘子的 Swift 周报 #129
人工智能·swiftui·swift
曾经我也有梦想11 天前
ViewModifier 和 圆角以及渐变色
swiftui
zhangjikuan8913 天前
SwiftUI 状态管理与架构实战
ios·架构·swiftui
大熊猫侯佩13 天前
浣熊市生存手册:在 Xcode 预览中驯服“支离破碎”的 AI 流式数据
swiftui·stream·xcode 26·generable·foundationmodel·xcode previews·partially gener
曾经我也有梦想15 天前
ObservableObject @Published @ObservedObject那些事
swiftui