Navigation View background Color

Question

I'm try to set a background color on my SwiftUi List, as for my post here: SwiftUI Background List color

I found a solution inserting the following code as init()

   init() {
        UITableView.appearance().backgroundColor = UIColor.clear
        UITableViewCell.appearance().backgroundColor = .clear
    }

my issue now is ... as soon I insert a Navigation Link the background color again became white.

how to set the color to .clear to the NavigationView? I have tried to .foregroundColor(.clear) but noting...

what I want is having a nav link working with no white background.. like this

but actually it does like this :

struct ContentView: View {

    var dm : DataManager

    init(dmi: DataManager) {
        self.dm = dmi
        UITableView.appearance().backgroundColor = UIColor.clear
        UITableViewCell.appearance().backgroundColor = .clear

    }
    var body: some View {

        ZStack{
            RadialGradient(gradient: Gradient(colors: [.orange, .red]), center: .center, startRadius: 100, endRadius: 470).edgesIgnoringSafeArea(.all)
                .overlay(
                    // NavigationView{
                    List{
                        ForEach(dm.vector, id: \.self) {  item in
                            Text(String(item))
                        }

                    }
                    //                    }
            )
        }

    }
}

score 2 · Accepted Answer · answered Feb 10 '20 at 14:23

It is easy. I don't suggest you to do it, you better follow apple ui design recommendation

struct ContentView: View {

    init() {
        UITableView.appearance().backgroundColor = UIColor.clear
        UITableViewCell.appearance().backgroundColor = .clear

    }
    var body: some View {
        NavigationView {
            RadialGradient(gradient: Gradient(colors: [.orange, .red]), center: .center, startRadius: 100, endRadius: 470).edgesIgnoringSafeArea(.all)
                .overlay(
                    List{
                        Text("Alfa")
                        NavigationLink(destination: Text("LINKED")) {
                            Text("Label")
                        }

                    }.navigationBarTitle("Table")
            )
        }
    }
}

score 0 · Answer 2 · answered Jun 20 '20 at 17:57

Looking in the view debugger it appears that the hierarchy of views that NavigationView creates includes a view with a white background that covers the entire screen and cannot be modified.

However, I was able to get around this by setting the background for the entire screen on the individual views within the navigation stack, which overlays the overlay created by the navigation view haha.

Here's an example using a red background:

struct ContentView: View {
  var body: some View {
    NavigationView {
      ZStack {
        Color.red.edgesIgnoringSafeArea(.all)
        ListView {          
          Text("Hello, world!")
        }
      }
    }
  }
}

Navigation View background Color

2 Answers2

Linked