Is there a way to change the background of List rows in SwiftUI?

Question

I would like to change the background color of List rows in SwiftUI but can't quite figure it out. Here's a simpler version of the code I've written so far.

struct ContentView: View {
    init() {
        UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor:UIColor.black]
        UINavigationBar.appearance().barTintColor = .blue
    }
    
    var body: some View {
        NavigationView {
            ZStack {
                HStack {
                    List(0...10) { test in
                        Spacer()
                            self.background(Color.purple)
                        Text("This is a test")
                        Spacer()
                        self.background(Color.pink)
                    }
                    .background(Color.blue)
                    List(0...10) { test2 in
                        Spacer()
                        Text("Also a test")
                            .background(Color.green)
                        Spacer()
                    }
                    .background(Color.red)
                }
            }
        }
        .navigationBarTitle(
            Text("Test"),
            displayMode: .inline
        )
    }
}

I'd like only the cell/row backgrounds to change color, but they stay white in light mode and black in dark mode.

Its a duplicate question of https://stackoverflow.com/questions/56517904/how-do-i-modify-the-background-color-of-a-list . Please check the link it might help you! — Anjali Kevadiya, Aug 16 '19 at 16:22

Ketan Odedra · Accepted Answer · 2019-10-11T09:16:57.950

3

You can use .colorMultiply() property for that,

Code is updated for XCode 11.

Check Below Code :

init() {
        UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor:UIColor.black]
        UINavigationBar.appearance().barTintColor = .blue
    }

    var body: some View {

    NavigationView {
        VStack {
            HStack {
                List(0..<10) { test1 in
                    Spacer()
                    Text("This is a test1")
                    Spacer()
                }.colorMultiply(Color.pink)

                List(0..<10) { test2 in
                    Spacer()
                    Text("This is a test2")
                        .background(Color.green)
                    Spacer()
                }.colorMultiply(Color.green)
            }.padding(.top)
        }.navigationBarTitle(Text("Test"), displayMode: .inline)
    }

}

Output :

edited Oct 11 '19 at 09:16

answered Jul 23 '19 at 06:36

Ketan Odedra

1,215
10
35

Does not work in the XCode 11 now. The color is applied to the text, in my case, and whatever I do I cannot set the background color of the row itself, what seems to be called the "UIItemHostingView" when debugging the view hierarchy – Simon Sep 26 '19 at 11:18
@Simon are you checking on XCode 11 Beta 4? – Ketan Odedra Sep 27 '19 at 14:42
@KetanOdedra I have not, as XCode 11 is released. I was meant to write "Does not work in the stable XCode 11 now.", but apparently I skipped out on that vital detail haha... – Simon Oct 08 '19 at 09:13
@Simon now code is updated for XCode 11. – Ketan Odedra Oct 11 '19 at 09:17
@KetanOdedra It sure changes the background in a way now, but not in a way it's possible to use this. On top of the fact that it breaks the NavigationView the List is inside (the header is overlapping the first elements). This happens both in the Preview and on the device/simulator. – Simon Oct 14 '19 at 08:14
@KetanOdedra I updated to XCode 11.1 as well trying the exact same thing, and I get the same problem. – Simon Oct 14 '19 at 10:43

score 0 · Answer 2 · answered Jul 23 '19 at 11:15

One of the things that I discovered playing with lists and sections is that they are tupleview types i.e. they aren't a single view and things like border() and background() apply to the elements inside the list, not the list itself. To create a single view to modify you need to embed them in a stack.

Is there a way to change the background of List rows in SwiftUI?

2 Answers2