[英]SwiftUI List color background
如果我列出静态项目,我无法更改视图的背景颜色。 这是我的代码:
NavigationView {
ZStack {
Color("AppBackgroundColor").edgesIgnoringSafeArea(.all)
List {
Section(header: Text("Now in theaters")) {
ScrollMovies(type: .currentMoviesInTheater)
}
Section(header: Text("Popular movies")) {
ScrollMovies(type: .popularMovies)
}
}.listStyle(.grouped)
}
}
从 Xcode 14 beta 3 开始,您可以使用此修饰符更改所有列表和可滚动内容的背景:
.scrollContentBackground(.hidden)
您可以传入.hidden
以使其透明。 所以你可以看到下面的颜色或图像。
所有 SwiftUI 的List
都由UITableView
支持(直到 iOS 16)。 所以你需要改变tableView的背景颜色。 你把它说clear
,这样其他view
就会在它下面可见:
struct ContentView: View {
init(){
UITableView.appearance().backgroundColor = .clear
}
var body: some View {
Form {
Section(header: Text("First Section")) {
Text("First cell")
}
Section(header: Text("Second Section")) {
Text("First cell")
}
}
.background(Color.yellow)
}
}
现在您可以使用您想要的任何背景(包括所有Color
)
请注意,那些顶部和底部的白色区域是安全区域,您可以使用.edgesIgnoringSafeArea()
修饰符来摆脱它们。
另请注意,带有.listStyle(GroupedListStyle())
修饰符的List
可以替换为简单的Form
。 但请记住,SwiftUI 控件的行为会根据其封闭视图而有所不同。
此外,您可能还希望将UITableViewCell
的背景颜色设置为clear
以及普通表格视图
@State var users: [String] = ["User 1",
"User 2",
"User 3",
"User 4"]
init(){
UITableView.appearance().backgroundColor = .red
UITableViewCell.appearance().backgroundColor = .red
UITableView.appearance().tableFooterView = UIView()
}
var body: some View {
List(users, id: \.self){ user in
Text(user)
}
.background(Color.red)
}
PlaygroundPage.current.liveView = UIHostingController(rootView: ContentView())
List
不能被“绘制”。 请改用以下内容:
物品清单:
ForEach(items) { item in
HStack {
Text(item)
}
}.background(Color.red)
可滚动的项目列表:
ScrollView {
ForEach(items) { item in
HStack {
Text(item)
}
}.background(Color.red)
}
在你的情况下:
VStack { // or HStack for horizontal alignment
Section(header: Text("Now in theaters")) {
ScrollMovies(type: .currentMoviesInTheater)
}
Section(header: Text("Popular movies")) {
ScrollMovies(type: .popularMovies)
}
}.background(Color.red)
您可以为列表中的项目提供修饰符
NavigationView {
ZStack {
Color("AppBackgroundColor").edgesIgnoringSafeArea(.all)
List {
Section(header: Text("Now in theaters")) {
ScrollMovies(type: .currentMoviesInTheater)
.listRowBackground(Color.blue) // << Here
}
Section(header: Text("Popular movies")) {
ScrollMovies(type: .popularMovies)
.listRowBackground(Color.green) // << And here
}
}.listStyle(.grouped)
}
}
对于 macOS 上的 SwiftUI,这适用:
extension NSTableView {
open override func viewDidMoveToWindow() {
super.viewDidMoveToWindow()
// set the background color of every list to red
backgroundColor = .red
}
}
它将每个列表的背景颜色设置为红色(在该示例中)。
使用UITableView.appearance().backgroundColor
可以影响应用中所有 List 控件的背景颜色。 如果您只想影响一个特定的视图,作为一种解决方法,您可以将其设置为 onAppear 并将其设置回默认的 onDisappear。
import SwiftUI
import PlaygroundSupport
struct PlaygroundRootView: View {
@State var users: [String] = ["User 1",
"User 2",
"User 3",
"User 4"]
var body: some View {
Text("List")
List(users, id: \.self){ user in
Text(user)
}
.onAppear(perform: {
// cache the current background color
UITableView.appearance().backgroundColor = UIColor.red
})
.onDisappear(perform: {
// reset the background color to the cached value
UITableView.appearance().backgroundColor = UIColor.systemBackground
})
}
}
PlaygroundPage.current.setLiveView(PlaygroundRootView())
目前最简单的方法就是使用 UIAppearance 代理。 SwiftUI 还很年轻,所以苹果还没有完全正确地实现一些功能。
UITableView.appearance().backgroundColor = .red
聚会有点晚了,但这可能会有所帮助。 我使用以下组合:
UITableView.appearance
外观UITableViewCell.appearance
外观List
listRowBackground
修饰符。设置外观会影响整个应用程序,因此您可能希望在适用的情况下将其重置为其他值。
示例代码:
struct ContentView: View {
var body: some View {
let items = ["Donald", "Daffy", "Mickey", "Minnie", "Goofy"]
UITableView.appearance().backgroundColor = .clear
UITableViewCell.appearance().backgroundColor = .clear
return ZStack {
Color.yellow
.edgesIgnoringSafeArea(.all)
List {
Section(header: Text("Header"), footer: Text("Footer")) {
ForEach(items, id: \.self) { item in
HStack {
Image(systemName: "shield.checkerboard")
.font(.system(size: 40))
Text(item)
.foregroundColor(.white)
}
.padding([.top, .bottom])
}
.listRowBackground(Color.orange))
}
.foregroundColor(.white)
.font(.title3)
}
.listStyle(InsetGroupedListStyle())
}
}
}
因为,您要求更改视图的背景颜色,
您可以为此使用.colorMultiply()
。
代码:
var body: some View {
VStack {
ZStack {
List {
Section(header: Text("Now in theaters")) {
Text("Row1")
}
Section(header: Text("Popular movies")) {
Text("Row2")
}
/*Section(header: Text("Now in theaters")) {
ScrollMovies(type: .currentMoviesInTheater)
}
Section(header: Text("Popular movies")) {
ScrollMovies(type: .popularMovies)
} */
}.listStyle(.grouped)
}.colorMultiply(Color.yellow)
}
}
输出:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.