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

相关推荐
东坡肘子6 天前
谁是 AI-relay App 的真正威胁 -- 肘子的 Swift 周报 #158
人工智能·swiftui·swift
东坡肘子13 天前
当 Build in Public 重新转入地下 -- 肘子的 Swift 周报 #157
人工智能·swiftui·swift
OliverQiu13 天前
开源一个 macOS 小工具:集中管理 ChatGPT 的网络启动配置
macos·chatgpt·swiftui·mac·proxy·codex·dmg
传奇开心果编程17 天前
【SwiftUI提高练中学】第9课 安全与隐私
swiftui·移动开发·swift·编程语言理论·开发范式·编程框架·声明式ui
传奇开心果编程18 天前
【声明式UI开发实用技术学与练】第8课 状态提升与下放
学习·flutter·react native·ui·swiftui·composer
东坡肘子18 天前
Swift Server,又多了一个 Google -- 肘子的 Swift 周报 #156
人工智能·swiftui·swift
传奇开心果编程19 天前
【现代声明式UI学与练】第4课 列表渲染与 key——如何高效渲染列表、key 的作用、列表重排时的状态保持
学习·flutter·react native·ui·swiftui·android jetpack
传奇开心果编程19 天前
【SwiftUI提高练中学】第8课 网络层架构:拦截器、重试、缓存与离线优先
学习·macos·ui·ios·swiftui
传奇开心果编程19 天前
【现代声明式UI学与练】第7课 组件通信——父传子、子传父、跨层级通信、状态提升与 Context
学习·flutter·react native·ui·swiftui·android jetpack
tink20 天前
告别 Xcode IDE:用 VS Code + SweetPad + XcodeGen 开发 iOS 应用的完整指南
ios·swiftui·xcode