Question

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

Answer 1

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

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

Answer 2

要更改所有视图控制器的导航栏颜色，必须在AppDelegate.swift文件中进行设置

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

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影响标题文字

我希望它会有所帮助。：）

Answer 3

在Rectangle内的NavigationView后面放置ZStack：

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

Answer 4

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

declare module 'ember' {
  export namespace Ember {
    export class Route {
      getParentRoute() : Route;
    }
  }
}

Answer 5

有关不使用UIViewControllerRepresentable的解决方案，请参见this answer。

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

sentry_integration = DjangoIntegration()
sentry_sdk.init(
    dsn="https://xxx@sentry.io/xxx",
    integrations=[sentry_integration]
)

Answer 6

使用Introspect，您可以这样做：

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

Answer 7

我首先不了解的一件事是：SwiftUI会根据您是否处于夜间模式来更改NavigationBar之类的外观。

如果要将其默认设置为其他配色方案，请添加

.colorScheme(.dark)

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

Answer 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，具体取决于上下文）

如何在导航栏中更改背景或颜色？

8 个答案: