Search code examples
swiftswiftuiswiftui-listswiftui-navigationview

SwiftUI: how to change NavigationView.toolbar background color


Any idea on how to apply a specific background color to the bottom toolbar?

NavigationView {
    List {
        ....
    }
    .toolbar {
        ToolbarItem(placement: .bottomBar) {
            Button(action: { model.selectTab(tab: "ITEM1") }, label: { Text("ITEM1") })
        }
        ToolbarItem(placement: .bottomBar) {
            Button(action: { model.selectTab(tab: "ITEM2") }, label: { Text("ITEM2") })
        }
        ToolbarItem(placement: .bottomBar) {
            Button(action: { model.selectTab(tab: "ITEM3") }, label: { Text("ITEM3") })
        }
    }
}

Solution

  • You can do this using UIToolbar appearance. Tested with Xcode 12 / iOS 14.

    demo

    struct DemoView: View {
        
        init() {
            UIToolbar.appearance().barTintColor = UIColor.red
        }
        
        var body: some View {
            NavigationView {
                List {
                    Text("Item")
                }
                .toolbar {
                    ToolbarItem(placement: .bottomBar) {
                        Button(action: { }, label: {Text("ITEM1")})
                    }
                    ToolbarItem(placement: .bottomBar) {
                        Button(action: { }, label: {Text("ITEM2")})
                    }
                    ToolbarItem(placement: .bottomBar) {
                        Button(action: { }, label: {Text("ITEM3")})
                    }
                }
            }
        }
    }