SwiftUI：如何更改 NavigationView.toolbar 背景颜色

Question

关于如何将特定背景颜色应用于底部工具栏的任何想法？

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

Answer 1

iOS 16 及以上版本

注意：使用 .toolbarBackground(.visible, for: .navigationBar) 栏背景的首选可见性。

详细教程在这里 - https://janeshswift.com/ios/swiftui/how-to-change-navigationview-colour-in-swiftui/

struct ContentView : View {
    var body: some View {
        NavigationStack {
            Text("Dashboard")
                .toolbar {
                    ToolbarItem(placement: .principal) {
                        Text("Cool Title")
                            .foregroundColor(.black)
                    }
                }
                .navigationBarTitleDisplayMode(.inline)
                .toolbarBackground(.red, for: .navigationBar)
                .toolbarBackground(.visible, for: .navigationBar)
        }
    }
}

Answer 2

您可以使用UIToolbar外观来做到这一点。使用 Xcode 12 / iOS 14 测试。

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

Answer 3

下面的代码对我不起作用：

init() {
    UIToolbar.appearance().barTintColor = UIColor.red
}

这段代码的工作原理：

init() {
  let coloredAppearance = UINavigationBarAppearance()
  coloredAppearance.configureWithOpaqueBackground()
  coloredAppearance.backgroundColor = .systemRed
  coloredAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
  coloredAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
  
  UINavigationBar.appearance().standardAppearance = coloredAppearance
  UINavigationBar.appearance().compactAppearance = coloredAppearance
  UINavigationBar.appearance().scrollEdgeAppearance = coloredAppearance
  
  UINavigationBar.appearance().tintColor = .white
}

摘自Kristaps Grinbergs 的博客。

Answer 4

iOS 16+

.toolbarBackground(
    .red,
    for: .navigationBar)
.toolbarBackground(.visible, for: .navigationBar)

欲了解更多信息：

https://developer.apple.com/documentation/swiftui/tabview/toolbarbackground(_:for:)