如何在 SwiftUI 中修改 List 的背景颜色？

Question

我正在尝试在 SwiftUI 中重新创建使用 UIKit 构建的 UI，但遇到了一些小问题。

我想在这里更改List 的颜色，但似乎没有任何属性可以按我的预期工作。示例代码如下：

struct ListView: View {
    @EnvironmentObject var listData: ListData

       var body: some View {
        NavigationView {
            List(listData.items) { item in
                ListItemCell(item: item)
            }
            .content.background(Color.yellow) // not sure what content is defined as here
            .background(Image("paper-3")) // this is the entire screen 
        }
    }
}

struct ListItemCell: View {
    let item: ListItem

    var body: some View {

        NavigationButton(destination: Text(item.name)) {
            Text("\(item.name) ........................................................................................................................................................................................................")
                .background(Color.red) // not the area I'm looking for
        }.background(Color.blue) // also not the area I'm looking for
    }
}

Answer 1

我能够使用 colorMultiply(Color:) 让整个列表更改颜色。只需将此修饰符添加到列表视图的末尾，然后填充会将表格推到设备边缘。例如：

List {...}.colorMultiply(Color.green).padding(.top)

https://www.hackingwithswift.com/quick-start/swiftui/how-to-adjust-views-by-tinting-and-desaturating-and-more

Answer 2

好的，我找到了为列表行着色的解决方案：

struct TestRow: View {

    var body: some View {
        Text("This is a row!")
        .listRowBackground(Color.green)
    }
}

然后在正文中：

List {
    TestRow()
    TestRow()
    TestRow()
}

这按我的预期工作，但我还没有弄清楚如何删除行之间的分隔线......

Answer 3

如果尝试使用 .listRowBackground 并应用 .padding 使用 SwiftUI 创建浮动类型单元格，有人可能会发现这很有用

var body: some View {
    NavigationView {
        List {
            ForEach (site) { item in
                HStack {
                    Text(String(item.id))

                    VStack(alignment: .leading) {
                        Text(item.name)
                        Text(item.crop[0])
                    }

                }.listRowBackground(Color.yellow)
                      .padding(.trailing, 5)
                      .padding(.leading, 5)
                      .padding(.top, 2)
                      .padding(.bottom, 2))
            }
        }
            .navigationBarTitle(Text("Locations"))
    }
}

Answer 4

我认为 listRowPlatterColor 修饰符应该这样做，但不是从 Xcode 11 Beta 11M336w 开始

var body: some View {
    List(pokemon) { pokemon in
        PokemonCell(pokemon: pokemon)
            .listRowPlatterColor(.green)
    }
}

Answer 5

我不知道连接是什么，但如果你用Form 包装列表，它就可以工作。

Form {
     List(viewModel.currencyList, id: \.self) { currency in
        ItemView(item: currency)
     }
      .listRowBackground(Color("Primary"))
      .background(Color("Primary"))
}

Answer 6

您可以通过更改UITableView 的外观来做到这一点。

UITableView.appearance().backgroundColor = UIColor.clear

只需将此行放入Appdelegate 的didFinishLaunchingWithOptions 方法中。 代替UIColor.clear 设置您想在list 的背景颜色中添加的任何颜色。

Answer 7

struct ContentView: View {

    var strings = ["a", "b"]

    var body: some View {

        List {
            ForEach(strings, id: \.self) { string in
                Text(string)
            }.listRowBackground(Color.green)
        }
    }
}

Answer 8

我启发了一些用于配置每页 NavigationView 导航栏样式的配置器，并编写了一些简单的 UITableView 每页配置器不使用 UITableView.appearance() 全局方法

   import SwiftUI

    struct TableViewConfigurator: UIViewControllerRepresentable {

        var configure: (UITableView) -> Void = { _ in }

        func makeUIViewController(context: UIViewControllerRepresentableContext<TableViewConfigurator>) -> UIViewController {

            UIViewController()
        }

        func updateUIViewController(_ uiViewController: UIViewController, context: UIViewControllerRepresentableContext<TableViewConfigurator>) {

            let tableViews = uiViewController.navigationController?.topViewController?.view.subviews(ofType: UITableView.self) ?? [UITableView]()

            for tableView in tableViews {
                self.configure(tableView)
            }
        }
    }

然后有 UIView 扩展需要找到所有 UITableViews

extension UIView {
    func subviews<T:UIView>(ofType WhatType:T.Type) -> [T] {
        var result = self.subviews.compactMap {$0 as? T}
        for sub in self.subviews {
            result.append(contentsOf: sub.subviews(ofType:WhatType))
        }
        return result
    }
}

最后的用法是：

List {

}.background(TableViewConfigurator {
    $0.backgroundColor = .red
})

也许应该改进一件事，那就是使用 navigationController?.topViewController 使其即使在视图控制器层次结构中没有 navigationController 也能工作

Answer 9

对我来说，在 SwiftUI 中更改 List 背景的完美解决方案是：

struct SomeView: View {
    init(){
    UITableView.appearance().backgroundColor = UIColor(named: "backgroundLight")
      }
...

}

Answer 10

这会将整个列表的背景设置为绿色：

init() {
   UITableView.appearance().separatorStyle = .none
   UITableViewCell.appearance().backgroundColor = .green
   UITableView.appearance().backgroundColor = .green
}

Answer 11

列表还不完善。

一种选择是像这样使用它 -> List { ForEach(elements) { }} 而不是 List($elements)

就我而言，这是迄今为止效果最好的。 就像@FontFamily 所说，它不应该破坏任何List 默认行为，例如滑动。

Answer 12

.colorMultiply(...)

您可以选择.colorMultiply(Color.yourColor) 修饰符。

警告：这不会改变颜色！这只会将Multiply 修饰符应用于当前颜色。请在采取任何行动之前阅读问题，因为您可能正在寻找：“如何在 SwiftUI 中更改列表的背景颜色”，这对您不起作用。 ❄️

示例：

List (elements, id:\.self ) { element in

     Text(element)

}
.colorMultiply(Color.red) <--------- replace with your color

Answer 13

SwiftUI中有一个说法：listRowBackground()，但是如果直接用List来迭代数据集合，就不行了。

这是我的解决方法：

    List {
        // To make the background transparent, we have we use a ForEach as a wrapper
        ForEach(files) {file in
            Label(
                title: { Text(file.name ?? fileOptionalFiller).lineLimit(listRowTextLineLimit) },
                icon: { AppIcon.doc.foregroundColor(.primary) }
            )
        }
        .listRowBackground(Color.primary.colorInvert())
    }

基本上，如果您在 List 中使用 ForEach，则 listRowBackground() 可以工作。

Answer 14

如果有人来这里寻找 iPhone X/11 上横向背景而不是全宽的解决方案，请尝试：

.listRowBackground(Color("backgroundColour").edgesIgnoringSafeArea(.all))

Answer 15

Xcode 12.4 版

Background 属性对我有用，但必须使用 Opacity。 没有 opacity 是行不通的。

List {
            ForEach(data, id: \.id) { (item) in
                ListRow(item)
                    .environmentObject(self.data)
            }
        }
        .background(Color.black)
        .opacity(0.5)

Answer 16

struct Details: View {

    var body: some View {
        Spacer().overlay(
            List {
                Text("Hello World!").font(.title2)
                    .listRowBackground(Color.clear)
                Text("Hello World again").font(.title2)
                    .listRowBackground(Color.clear)
            }.onAppear() {
                UITableView.appearance().backgroundColor = UIColor.green
                UITableViewCell.appearance().backgroundColor = UIColor.green
            }
        )
    }
}

Answer 17

更改背景颜色

正如其他人所提到的，更改 UITableView 背景会影响您应用中的所有其他列表。

但是，如果您想要不同的背景颜色，您可以将默认设置为 clear，并在 swiftui 视图中设置背景颜色，如下所示：

List {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}
// Ignore safe area to take up whole screen
.background(Color.purple.ignoresSafeArea())
.onAppear {
    // Set the default to clear
    UITableView.appearance().backgroundColor = .clear
}

您可能希望更早地设置 tableview 外观，例如在 SceneDelegate 或根视图中，如下所示：

// SceneDelegate
func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
      
    
    guard let windowScene = scene as? UIWindowScene else {
        print("Returning because screne does not exist")
        return
            
    }
    
    // Set here    
    UITableView.appearance().backgroundColor = .clear
    let contentView = ContentView()
    let window = UIWindow(windowScene: windowScene)
    window.rootViewController = UIHostingController(rootView: contentView)
    self.window = window
    window.makeKeyAndVisible()
}


// Root App View
@main
struct ListBackgroundApp: App {
    
    init() {
        UITableView.appearance().backgroundColor = .clear
    }
    
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Answer 18

MacOS 解决方案

以下代码使所有Lists 背景颜色透明：

// Removes background from List in SwiftUI
extension NSTableView {
    open override func viewDidMoveToWindow() {
        super.viewDidMoveToWindow()
        
        backgroundColor = NSColor.clear
        if let esv = enclosingScrollView {
            esv.drawsBackground = false
        }
    }
}

以下代码使所有TextEditors 背景颜色透明：

extension NSTextView {
    open override var frame: CGRect {
        didSet {
            backgroundColor = .clear
            drawsBackground = true
        }
    }
}

Answer 19

https://stackoverflow.com/a/59970379/9439097 的答案似乎是迄今为止最好的实现。这是一个示例视图：

import SwiftUI

struct TestView1: View {
    
    init(){
        UITableView.appearance().backgroundColor = UIColor(Color.clear)
    }
    
    @State var data = ["abc", "def"]
    
    var body: some View {
        VStack {
            List {
                ForEach(data, id: \.self) {element in
                    Text("\(String(describing: element))")
                }
                .background(Color.green)
                .listRowBackground(Color.blue)
                
            }
            .background(Color.yellow)
            Spacer()
            Color.red
        }
    }
}

struct TestView1_Previews: PreviewProvider {
    static var previews: some View {
        TestView1()
    }
}

产生：

Answer 20

如果您想避免全局设置所有表格视图的外观，可以将UITableView.appearance(whenContainedInInstancesOf:) 与UIHostingController 结合使用。感谢DanSkeel 您在上面留下的评论指出了这一点。我是这样使用的：

public class ClearTableViewHostingController<Content>: UIHostingController<Content> where Content: View {
    public override func viewDidLoad() {
        UITableView.appearance(whenContainedInInstancesOf: [ClearTableViewHostingController<Content>.self]).backgroundColor = .clear
    }
}

你可以像这样使用ClearTableViewHostingController：

let view = MyListView()
let viewController = ClearTableViewHostingController(coder: coder, rootView: view)

然后在您的视图中，您可以像这样设置列表背景颜色：

List {
    Text("Hello World")
}
.background(Color.gray)

Answer 21

只需在init()方法中添加UITableView外观背景颜色并添加列表样式(.listStyle(SidebarListStyle())。不要忘记导入UIKit 模块

struct HomeScreen: View {
init() {
    UITableView.appearance().backgroundColor = .clear
}

let tempData:[TempData] = [TempData( name: "abc"),
                         TempData( name: "abc"),
                         TempData( name: "abc"),
                         TempData( name: "abc")]

var body: some View {
    ZStack {
        Image("loginBackgound")
            .resizable()
            .scaledToFill()
        List{
            ForEach(tempData){ data in
                Text(data.name)
            }
        }
        .listStyle(SidebarListStyle())
        
    }
    .ignoresSafeArea(edges: .all)
}
}