SwiftUI 列表颜色背景
Posted
技术标签:
【中文标题】SwiftUI 列表颜色背景【英文标题】：SwiftUI List color background 【发布时间】：2019-07-20 20:59:22 【问题描述】：如果我列出静态项目，我无法更改视图的背景颜色。这是我的代码：
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)
【问题讨论】：
您要更改List 背景颜色还是ZStack 背景颜色？
我想改变所有视图的背景。
嘿，你看到我的working answer了吗？
【参考方案1】：
所有 SwiftUI 的 Lists 都由 ios 中的 UITableView支持。所以你需要改变tableView的背景颜色。您将其设为clear，因此其他views 将在其下方可见：
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)
现在您可以使用您想要的任何背景（包括所有Colors）
请注意那些顶部和底部的白色区域是安全区域，您可以使用.edgesIgnoringSafeArea() 修饰符将它们去掉。
另请注意带有.listStyle(GroupedListStyle()) 修饰符的List 可以替换为简单的Form。但请记住，SwiftUI 控件的行为会根据其封闭视图而有所不同。
另外您可能希望将UITableViewCell 的背景颜色设置为clear 以及普通的tableviews
【讨论】：
很好的答案，但这仅适用于 iOS。你知道如何在 macOS 上做同样的事情吗？ 我会调查一下@Lupurus 并告诉你 请注意，GroupedStyle 中的List 与Form 不同。 SwiftUI 控件的行为根据其封闭视图而有所不同。
@Lupurus 我为 macOS 添加了一个解决方案，如果你想要***.com/a/60424034/4100181
另外将 tableviewcells 设置为清除。 UITableViewCell.appearance().backgroundColor = .clear 这可以在将 ContenView 添加到场景之前在 SceneDelegate.swift 上设置。【参考方案2】：
@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())
【讨论】：
当列表后面有渐变背景时，这不起作用。 使用 UITableView.appearance() 将影响应用程序中的所有列表。请参阅下面我建议的答案。【参考方案3】：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)
【讨论】：
这是最好的答案，我还想发表评论，您可以在搜索栏中使用@State 来过滤您的 ForEach，就像您使用普通列表一样。通用示例： ForEach(items.filter( searchText.isEmpty ? true : $0.name.contains(searchText) )) item in HStack Text(item) 也可以使用！！！ “画”是什么意思？【参考方案4】：您可以为列表中的项目提供修饰符
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)
【讨论】：
不是正确答案 - 由于分组列表样式，您会丢失粘性标题。【参考方案5】：对于 macOS 上的 SwiftUI，这是可行的：
extension NSTableView
open override func viewDidMoveToWindow()
super.viewDidMoveToWindow()
// set the background color of every list to red
backgroundColor = .red
它将每个列表的背景颜色设置为红色（在该示例中）。
【讨论】：
【参考方案6】：目前最简单的方法就是使用 UIAppearance 代理。 SwiftUI 还很年轻，所以苹果还没有完全正确地实现一些功能。
UITableView.appearance().backgroundColor = .red
【讨论】：
这与 List rows 上的 listRowBackground() 相结合为我解决了这个问题。即使滚动视图，结果也是一致的，这是我想要实现的。【参考方案7】：使用UITableView.appearance().backgroundColor 会影响应用中所有列表控件的背景颜色。如果您只想影响一个特定的视图，作为一种解决方法，您可以将其设置为 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())
【讨论】：
【参考方案8】：聚会有点晚了，但这可能会有所帮助。我使用以下组合：
设置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())
【讨论】：
【参考方案9】：因为您要求更改视图的背景颜色，
您可以为此使用.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)
输出：
【讨论】：
这不是预期的答案。 colorMultiply() 为整个列表着色，包括单元格，这不是本意，它与列表背景颜色不同。 List 和其他所有视图都有背景修饰符 (.background(Color.red)，但它不适用于列表。 我认为在某些情况下这是一个合理的解决方法。 尝试在其中一个单元格中显示图像...黄色也将应用于它们以上是关于SwiftUI 列表颜色背景的主要内容，如果未能解决你的问题，请参考以下文章