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?
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)
}
}
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?
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)
}
}
Share
Improve this question
edited 2 days ago
Benzy Neez
21.2k3 gold badges14 silver badges36 bronze badges
asked 2 days ago
Ehz uiqEhz uiq
315 bronze badges
2 Answers
Reset to default 0Like most .toolbar
related modifiers, it needs to be in a NavigationStack
for it to actually work:
import SwiftUI
struct RootView: View {
var body: some View {
NavigationStack {
ScrollView {
ForEach(1...10, id: \.self) { number in
Text("Row \(number)")
.frame(maxWidth: .infinity, maxHeight: .infinity)
.padding()
.background(.regularMaterial.opacity(0.5), in: Capsule())
.padding(.horizontal)
}
}
.navigationTitle("Root view")
.toolbarTitleDisplayMode(.inline)
.background(Color(red: 0.733, green: 0.239, blue: 0.302))
.modifier(CustomToolsBar())
}
.foregroundStyle(.white)
}
}
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)
}
}
#Preview {
RootView()
}
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()
}
}
}