SwiftUI中BottomBar（底部工具栏）背景颜色无法修改求助

你的代码中.toolbarBackground修饰符的位置错误，导致无法生效。正确的做法是将该修饰符应用到NavigationStack的直接子视图上，而非嵌套在VStack内部的Text组件上。

关键调整说明 #

1. 将.toolbarBackground移至NavigationStack的直接子视图（示例中为VStack）的修饰链中
2. 可搭配.toolbarColorScheme调整工具栏内图标/文字的颜色，避免与背景色冲突
3. 若背景仍未显示，可显式添加.toolbarBackground(.visible, for: .bottomBar)确保背景可见

修改后的完整代码 #

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                Text("Test")
            }
            .toolbar {
                ToolbarItemGroup(placement: .bottomBar) {
                    Spacer()
                    NavigationLink(destination: SecondView()) {
                        Image(systemName: "bag")
                    }
                    Spacer()
                    NavigationLink(destination: SecondView()) {
                        Image(systemName: "dollarsign.circle")
                    }
                    Spacer()
                    NavigationLink(destination: SecondView()) {
                        Image(systemName: "plus.circle")
                    }
                    Spacer()
                    NavigationLink(destination: SecondView()) {
                        Image(systemName: "minus.circle")
                    }
                    Spacer()
                }
            }
            // 核心：将背景色设置应用到导航栈的根容器视图
            .toolbarBackground(Color.blue, for: .bottomBar)
            // 可选：深色背景下切换颜色方案，让图标文字更醒目
            .toolbarColorScheme(.dark, for: .bottomBar)
        }
    }
}

struct SecondView: View {
    var body: some View {
        Text("Second View")
    }
}

原理说明 #

SwiftUI的工具栏样式修饰符需要与导航栈的根视图关联，才能正确作用于整个底部工具栏。你之前将.toolbarBackground添加在Text组件上，作用范围仅局限于Text本身，无法影响到工具栏容器。

内容的提问来源于stack exchange，提问作者Cruder