How can I change the background color in SwiftUI when I am using NavigationView and List?

Question

I would like to change my background color, but I am using NavigationView and List. That's why the ZStack method doesn't work for me.

This is my Code:

NavigationView {
    List {
        Text("Some Text")
    }

    .navigationBarTitle("Test")
}

score 1 · Answer 1 · answered Oct 31 '19 at 15:34

1

You can use .listRowBackground inside the List.

  ZStack{
        Color.blue
   NavigationView {
    ZStack{
        Color.red
       List {
        ZStack{
            Color.green
            Text("Some Text").background(Color.green).opacity(0.5)

        }.listRowBackground(Color.red)
        }
    }
       .navigationBarTitle("Test")
   }.padding()

    }

answered Oct 31 '19 at 15:34

E.Coms

11,065
2
23
35

It doesn't work really well. The navigation bar is fixed. So the larger lists scroll through the Navigation bar which looks very strange. But thanks for the answer anyway – Mattis Schulte Oct 31 '19 at 15:48
You can use .inline style to make the navigation bar much smaller. In principle, list can be configured with listStyle if you know how to customize it. – E.Coms Oct 31 '19 at 16:25
1

You may need to check this post: https://stackoverflow.com/questions/57128547/swiftui-list-color-background – E.Coms Oct 31 '19 at 17:39

score 0 · Answer 2 · answered Oct 31 '19 at 15:05

0

NavigationView {
    List {
         Text("Some Text")
    }
    .navigationBarTitle("Test")
}.colorMultiply(Color.green)

answered Oct 31 '19 at 15:05

Dmytro Antonchenko

326
3
10

But if I want to use images then they will be colored as well – Mattis Schulte Oct 31 '19 at 15:18

score 0 · Accepted Answer · answered Oct 31 '19 at 18:46

Finally I have found an answer to my problem:

init() {
    UITableView.appearance().backgroundColor = UIColor(named: "CustomBackgroundColor")
    UITableViewCell.appearance().backgroundColor = UIColor(named: "CustomBackgroundColor")
    UITableView.appearance().tableFooterView = UIView()
}

var body: some View {
    NavigationView {
        List {
            Text("Hello")
        }

        .navigationBarTitle("Test")
    }
}

How can I change the background color in SwiftUI when I am using NavigationView and List?

3 Answers3