如何更改导航栏中的背景或颜色？答案

【问题标题】：How can the background or the color in the navigation bar be changed?如何更改导航栏中的背景或颜色？
【发布时间】：2019-06-26 13:04:44
【问题描述】：

目前我找不到任何方法来更改 SwiftUI 中导航栏的颜色/背景。有什么建议吗？

【问题讨论】：

标签： navigationbar swiftui

【解决方案1】：

为了改变所有视图控制器的导航栏颜色，你必须在AppDelegate.swift文件中设置它

在AppDelegate.swift中的didFinishLaunchingWithOptions函数中添加以下代码

var navigationBarAppearace = UINavigationBar.appearance()

navigationBarAppearace.tintColor = uicolorFromHex(0xffffff)
navigationBarAppearace.barTintColor = uicolorFromHex(0x034517)

在这里tintColor属性改变导航栏的背景颜色。

barTintColor 属性对颜色的影响：

返回指示符图片
按钮标题
按钮图片

奖励：

改变导航栏标题的颜色：

// change navigation item title color
navigationBarAppearace.titleTextAttributes =[NSForegroundColorAttributeName:UIColor.whiteColor()]

titleTextAttributes 影响标题文本

我希望它有所帮助。 :)

【讨论】：

抱歉，我可能不够清楚。问题是如何直接使用新的 SwiftUI API 来做到这一点。感谢您的评论
所以这似乎不适用于当前版本的 SwiftUI 什么有效：navigationBarAppearance.backgroundColor = ... 还有：navigationBarAppearance.tintColor = ... 更改图标的颜色，不是 barTintColor。

【解决方案2】：

在SwiftUI中，此时我们不能直接改变它，但是你可以像这样改变navigationBar的外观，

struct YourView: View {
    init() {
        UINavigationBar.appearance().backgroundColor = .orange

        //Use this if NavigationBarTitle is with Large Font
        UINavigationBar.appearance().largeTitleTextAttributes = [.font : UIFont(name: "Georgia-Bold", size: 20)!]

        //Use this if NavigationBarTitle is with displayMode = .inline
        //UINavigationBar.appearance().titleTextAttributes = [.font : UIFont(name: "Georgia-Bold", size: 20)!]
    }

    var body: some View {
        NavigationView {
            Text("Hello World!")
              .navigationBarTitle(Text("Dashboard").font(.subheadline), displayMode: .large)
            //.navigationBarTitle (Text("Dashboard"), displayMode: .inline)
        }
    }
}

我希望这会对你有所帮助。谢谢！！

【讨论】：

【解决方案3】：

到目前为止，SwiftUI 中还没有用于此目的的明确 API。但是您可以使用外观 API。这是一个示例代码。

import SwiftUI

struct ContentView : View {
    init() {
        UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor:UIColor.red]
        UINavigationBar.appearance().backgroundColor = .green
    }
    var body: some View {

        NavigationView {
            NavigationButton(destination: SecondPage(), label: {
                Text("Click")
            })
            .navigationBarTitle(Text("Title"), displayMode: .inline)
        }
    }
}

【讨论】：

在下面使用它会起作用 1) .navigationBarTitle(Text("Title")) 2) .navigationBarTitle(Text("Title"), displayMode: .large)
我不确定它如何改变导航栏的背景颜色？你能提供一个有效的代码sn-p吗？

【解决方案4】：

在NavigationView 后面加上Rectangle ZStack：

ZStack {
    Rectangle().foregroundColor(.red)
    NavigationView {
        ...
    }
}

【讨论】：

【解决方案5】：

有关不使用.appearance() 的解决方案，请参阅this answer。

简称UIViewControllerRepresentable

func updateUIViewController(_ uiViewController: UIViewController, context: UIViewControllerRepresentableContext<NavigationConfigurator>) {
    uiViewController.navigationController?.navigationBar...
}

【讨论】：

【解决方案6】：

使用Introspect，您可以这样做：

NavigationView {
    Text("Item 2")
    .introspectNavigationController { navigationController in
        navigationController.navigationBar.backgroundColor = .red
    }
}

【讨论】：

我正在寻找这个答案，如果您在init() 或onAppear() 上使用UINavigationBar.appearance()，它不仅会影响您当前的视图，而且您的解决方案只会影响视图本身，谢谢

【解决方案7】：

有一点我一开始不明白：SwiftUI 会根据你是否处于夜间模式来改变 NavigationBar 之类的东西的外观。

如果您想将其默认为不同的配色方案，请添加

.colorScheme(.dark)

如果您使用本文所述的颜色集系统创建配色方案：https://www.freecodecamp.org/news/how-to-build-design-system-with-swiftui/，它将应用于导航和标签栏等主要元素，并允许您为夜间/白天模式应用不同的方案。

【讨论】：

【解决方案8】：

NavigationView 正在管理全屏内容。这些屏幕中的每一个都有自己的背景颜色。因此，您可以使用以下方法将背景颜色应用到屏幕上：

let  backgroundColor = Color(red: 0.8, green: 0.9, blue: 0.9)

extension View {
    func applyBackground() -> some View {
        ZStack{
            backgroundColor
                .edgesIgnoringSafeArea(.all)
            self
        }
    }
}

然后将其应用到所有屏幕：

NavigationView {
    PrimaryView()
        .applyBackground()

    DetailView(title: selectedString)
        .applyBackground()
}

请注意：某些 SwiftUI 视图有自己的背景颜色，会覆盖您的背景颜色（例如 Form 和 List，具体取决于上下文）

【讨论】：