Toolbar background color not changing. Why?

96 Views Asked by At

Below is my CotentView. I ma trying to change background color of toolbar to red, but I am not abel to do it. Please let me know, How to do it?

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                // Your content goes here
            }
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    HStack {
                        Text("Kapoor Home")
                            .fontWeight(.semibold)
                            .foregroundColor(.black)
                        Image(systemName: "chevron.down")
                            .foregroundColor(.black)
                    }
                    .padding()
                }

                ToolbarItem(placement: .navigationBarTrailing) {
                    HStack {
                        Button(action: {
                            // Handle action for trailing item 1
                        }) {
                            Image(systemName: "plus")
                                .foregroundColor(.black)
                        }

                        Button(action: {
                            // Handle action for trailing item 2
                        }) {
                            Image(systemName: "bell.fill")
                                .foregroundColor(.black)
                        }
                    }
                    .padding()
                }
            }
            .navigationViewStyle(StackNavigationViewStyle()) // Set the navigation view style
            .background(Color.orange)
        }
    }
}
#Preview {
    ContentView()
}
1

There are 1 best solutions below

0
Vikas On

Below code is working for this issue.

struct ContentView: View {
    
    var body: some View {
        NavigationView {
            VStack {
                HomeView()
            }
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Menu {
                        Button("Option 1") {
                            
                        }
                        Button("Option 2") {
                            
                        }
                        Button("Option 3") {
                            
                        }
                    } label: {
                        HStack {
                            Text("Kapoor Home")
                                .fontWeight(.semibold)
                                .foregroundColor(.black)
                            Image(systemName: "chevron.down")
                                .foregroundColor(.black)
                        }
                    }
                    .padding(.vertical)
                }
                
                ToolbarItem(placement: .navigationBarTrailing) {
                    HStack {
                        Button(action: {
                            // Handle action trailing item 1
                        }) {
                            Image(systemName: "plus")
                                .foregroundColor(.black)
                        }
                        
                        Button(action: {
                            // Handle action trailing item 2
                        }) {
                            Image(systemName: "bell.fill")
                                .foregroundColor(.black)
                        }
                    }
                    .padding(.vertical)
                }
            }
            .navigationViewStyle(StackNavigationViewStyle())
            .toolbarBackground(Color(.red), for: .navigationBar)
            .toolbarBackground(.visible, for: .navigationBar)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Thanks @workingdogsupportUkraine