swifui列表颜色背景

I can’t change background color of a view if i List static items. this my code:

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背景颜色?Ketan Odedra
i want to change the background of all view.Nunzio Giulio Caggegi
Hey, did you see my 工作答案Mojtaba Hosseini

回答 9

  1. 赞同 27

    @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())
    

    Zo N Digiano
    当您在列表后面有一个渐变背景时不起作用。Strangetimes
    使用UITableView.AppeArce()将影响应用程序中的所有列表。请参阅下面的建议答案。Andy Thomas
  2. 赞同 27

    所有SWIFTUI的ListS由A支持UITableViewiOS。所以你需要改变背景颜色the 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)
        }
    }
    

    Now you can use any背景(包括所有ColorS)你想要

    Preview

    注意 those top and bottom white areas are the Safe地区 and you can use the .edgesIgnoringSafeArea()Modifier摆脱它们。

    Also注意 List.listStyle(GroupedListStyle())Modifier可以用简单的方式替换Form.但请记住,Swifui控件取决于他们的封闭观点不同。

    Also. you may want to set the UITableViewCell背景颜色clear对于普通的表达方式很好

    Mojtaba hosseini
    良好的答案,但这只适用于iOS。你知道如何在麦斯上制作同样吗?Lupurus
    Setting外观会影响整个应用程序,因此您可能希望将其重置为适用的其他值。Mojtaba Hosseini
    注意AList在GroupedStyle不一样Form. Swifui控件的行为不同,具体取决于他们的封闭视图。Tiziano Coroneo
    @Lupurus我为麦斯科斯添加了一个解决方案stackoverflow.com/a/60424034/4100181anthony
    Aditionally将TableViewCells设置为清除。 UITableViewCell.appeArance()。背景Color = .clear,可以在COSTANVIEW添加到场景之前在Scenedelegate.swift上设置。AAV
  3. 赞同 8

    ListCannot“绘制”。请使用以下内容:

    项目列表:

    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)
    

    dmitryz
    This is the best answer, I also want to leave a comment that you can use a @State in a search bar to filter your ForEach as you would a normal List aswell. Generic Example: ForEach(items.filter({ searchText.isEmpty ? true : $0.name.contains(searchText) })) { item in HStack {Text(item)}} will also work!!!DawiseGuy
    What do you mean by "painted"?Peter Schorn
  4. 赞同 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)
            }
        }
    
    

    Facundo Luis Rodriguez
    Not the correct answer - you lose Sticky headers because of the Grouped list style.Strangetimes
  5. 赞同 4

    对于MacOS的Swifui这项工作:

    extension NSTableView {
        open override func viewDidMoveToWindow() {
            super.viewDidMoveToWindow()
    
            // set the background color of every list to red
            backgroundColor = .red
        }
    }
    

    它将将每个列表的背景颜色设置为红色(在该示例中)。

    anthony
  6. 赞同 2

    最简单的方法现在只是为了使用UIAPPEARANCE代理。 Swifui很年轻,所以苹果还有几个没有完全正确实施的功能。

    UITableView.appearance().backgroundColor = .red

    mm282
    This combined with listRowBackground() on List rows solved it for me. The result is consistent even when scrolling the view, which is what I wanted to achieve.Stefan Edberg
  7. 赞同 1

    使用UITableView.appearance().backgroundColorCAN影响应用程序中所有列表控件的背景颜色。如果只希望将一个特定的视图受到影响,作为解决方法,您可以将其设置为WANAPPEAR并将其设置为默认的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())
    
    

    Andy Thomas
  8. 赞同 0

    派对晚了,但这可能有所帮助。我使用的组合:

    • 诱约UITableView.appearanceAppearance.
    • Setting.UITableViewCell.appearanceAppeArance.
    • 提出List listRowBackground修改器。

    Setting the appearance affects the entire app, so you may want to reset it to other values where applicable.

    Sample代码:

    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())
            }
            
        }
    }
    

    Titusmagnus
  9. 赞同 -3

    Since,您要求更改视图的背景颜色,

    you can use .colorMultiply()如此。

    Code:

    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)
            }
    }
    

    Output:

    enter image description here

    ketan Odedra
    This is not expected answer. colorMultiply() tints the whole list, including cells, which is not the intention, and it is not same as list background color. There is background modifier (.background(Color.red) for List and for every other view, but it doesn't work for lists.iosdev
    I think this is a reasonable workaround in some circumstances.Bart van Kuik
    TRY在其中一个单元中显示图像......黄色也将应用于它们Tiziano Coroneo