工具栏背景颜色不变。为什么？

Question

下面是我的 CotentView。 我试图将工具栏的背景颜色更改为红色，但我无法这样做。请告诉我，该怎么做？

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

Answer 1

移动要应用到工具栏上的

.background(Color.red)

修饰符，而不是

VStack

。

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()
                }
            }
            .background(Color.red) // Change the background color of toolbar
            .navigationViewStyle(StackNavigationViewStyle()) // Set the navigation view style
        }
    }
}