Search code examples
iosswiftuitoolbar

How to remove the background color of the SwiftUI toolbar in the root view?


I’ve tried using .toolbarBackground(.hidden, for: .bottomBar), but it doesn't seem to work. How can I remove the background color of the toolbar in the root view? enter image description here

var body: some Scene {
    WindowGroup {
       RootView()
    }
}
struct RootView: View {
   let columns = [
      GridItem(.flexible(), spacing: 0),
      GridItem(.flexible(), spacing: 0)
   ]
   
   var body: some View {
      ScrollView{
         ZStack{
            cardStack()
         }
         .frame(maxWidth: .infinity, maxHeight: .infinity)
      }
      .background(Color("BA3D4E"))
      .modifier(CustomToolsBar())
   }
}
struct CustomToolsBar: ViewModifier {
   func body(content: Content) -> some View {
      content
         .toolbar {
            ToolbarItemGroup(placement: .bottomBar) {
               Text("Yesterday")
               Spacer()
               Text("+")
               Spacer()
               Text("Tomorrow")
            }
         }
         .toolbarBackground(.hidden, for: .bottomBar)
   }
}

Solution

  • I couldn't find a way to hide the native toolbar background either.

    However, if you don't want the toolbar background to be shown, there probably isn't much point in adding your custom toolbar using the modifier .toolbar. You might as well add it using .safeAreaInset instead:

    struct CustomToolsBar: ViewModifier {
        func body(content: Content) -> some View {
            content
                .safeAreaInset(edge: .bottom) {
                    HStack {
                        Text("Yesterday")
                        Spacer()
                        Text("+")
                        Spacer()
                        Text("Tomorrow")
                    }
                    .padding()
                }
        }
    }