Damiano Miazzi
Damiano Miazzi

Reputation: 2315

Navigation View background Color

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 thisImage with correct effect

but actually it does like this :

Image wrong effect with NavigationLink active

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

                    }
                    //                    }
            )
        }

    }
}

Upvotes: 1

Views: 1280

Answers (2)

bkempner
bkempner

Reputation: 652

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

Upvotes: 0

user3441734
user3441734

Reputation: 17534

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

enter image description here

Upvotes: 2

Related Questions