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

相关推荐
sakiko_1 天前
Swift学习笔记33-多线程与UI渲染
笔记·学习·swiftui·swift
东坡肘子3 天前
从社区路标到生态基石:Dave Verwer 的新篇章 -- 肘子的 Swift 周报 #137
人工智能·swiftui·swift
Daniel_Coder7 天前
iOS Widget 开发-18:Widget 的 SwiftUI 视图适配与设计
ios·swiftui·swift·widget·widgetcenter
Daniel_Coder10 天前
iOS Widget 开发-12:Widget 深度链接与导航
ios·swiftui·swift·widget·intents
Daniel_Coder10 天前
iOS Widget 开发-11:Widget 交互按钮实战(iOS 17+ App Intents)
ios·swiftui·swift·widget·link·appintents
东坡肘子10 天前
消失的 WWDC 愿望单 -- 肘子的 Swift 周报 #136
人工智能·swiftui·swift
浩宇软件开发10 天前
SwiftUI入门 10 分钟学会做一个 App 引导页
ios·swiftui·swift
sakiko_13 天前
Swift报错合集(Xcode编译器)
开发语言·swiftui·xcode·swift·uikit
Joseph1816 天前
深度拆解 DanceUI:从声明式视图到原生渲染的全链路技术解析
ios·swiftui
唐诺17 天前
iOS UI 开发完全指南:UIKit 与 SwiftUI
ui·ios·swiftui