如何更改NavigationView上后退按钮的颜色

Question

当您单击该按钮时，它会将您带到一个新视图，并在左上角放置一个后退按钮。我不知道什么属性控制后退按钮的颜色。我尝试添加accentColor和foregroundColor，但它们只编辑视图内的项目。

var body: some View {
    NavigationView {
        NavigationLink(destination: ResetPasswordView()) {
            Text("Reset Password")
            .foregroundColor(Color(red: 0, green: 116 / 255, blue: 217 / 255))
            .padding()
        }
    }
}

Answer 1

您可以使用NavigationView上的

accentColor

属性来设置后退按钮颜色，如下例所示：

var body: some View {
    NavigationView {
        List(1..<13) { item in
            NavigationLink(destination: Text("\(item) x 8 = \(item*8)")) {
                Text(String(item))
            }
        }.navigationBarTitle("Table of 8")
    }.accentColor(.black) // <- note that it's added here and not on the List like navigationBarTitle()
}

Answer 2

我尝试做同样的事情有一段时间了，但认为还没有 SwiftUI 解决方案。不过，能够完成工作的一件事（如果它适用于您的用例）是 UIKit 的外观：

UINavigationBar.appearance().tintColor = .black

Answer 3

我怀疑这是正确的方法，但我通过修改 SceneDelegate.swift 来设置窗口色调颜色来使其工作。

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {

    // Use a UIHostingController as window root view controller
    let window = UIWindow(frame: UIScreen.main.bounds)
    window.rootViewController = UIHostingController(rootView: ContentView())
    window.tintColor = .green // set the colour of the back navigation text
    self.window = window
    window.makeKeyAndVisible()
}

Answer 4

NavigationView {
    Text("Hello World")
      .toolbar {
                    ToolbarItem(placement: .navigationBarLeading) {
                        Button("Close") { }
                    }
            }
 }
 .accentColor(.themeColor)

Answer 5

Assets.xcassets

中设置 AccentColor。 XCode 将为应用程序中的所有导航后退按钮使用此颜色。

请注意，这也会影响其他 UI 元素。其中之一是按钮。您始终可以使用accentColor修饰符来覆盖它：

Button("Button With Different Accent Color") { 
   // do something useful
}
.accentColor(.red)

Answer 6

添加资产目录（Assets.xcassets）中设置的

AccentColor

。 Xcode 应用您在此颜色集中指定的颜色作为应用程序的强调色。 简短的解决方案

将强调色添加到资产目录后，导航栏后退按钮将变为该颜色。这就是您所需要的。

更多详情

如果您的应用没有 AccentColor 颜色集，请通过下面列出的步骤手动创建颜色集：

在项目导航器中，选择资产目录。

1. 单击大纲视图底部的添加按钮 (+)。
2. 在弹出菜单中，选择“颜色设置”。新的颜色集出现在大纲视图中并在详细信息区域中打开。
3. 双击大纲视图中的颜色集名称，使用描述性名称重命名颜色集，然后按 Return 键。
4. 在构建设置中，找到“全局强调颜色名称”的构建设置。双击构建设置，输入强调颜色集的名称，然后按 Return 键。
从代码中访问强调色

默认情况下，强调色适用于应用程序中使用色调颜色的所有视图和控件，除非您覆盖视图层次结构的特定子集的颜色。但是，您可能希望将强调色合并到用户界面中不依赖色调的其他部分，例如静态文本元素。 要在代码中使用资产目录中的强调色值，请像这样加载颜色：

SwiftUI

Text("Accent Color")
    .foregroundStyle(Color.accentColor)

UIKit

label.textColor = UIColor.tintColor

什么是强调色？

强调色或色调颜色是一种广泛的主题颜色，适用于应用程序中的视图和控件。使用强调色快速为您的应用创建统一的配色方案。您可以通过在资产目录中指定强调色来为应用程序设置强调色。

有关该主题的更多信息，请查看

文档

。

Answer 7

import Foundation
import SwiftUI

struct NavigationBackButton: ViewModifier {

    @Environment(\.presentationMode) var presentationMode
    var color: UIColor
    var text: String?

    func body(content: Content) -> some View {
        return content
            .navigationBarBackButtonHidden(true)
            .navigationBarItems(
                leading: Button(action: {  presentationMode.wrappedValue.dismiss() }, label: {
                    HStack(spacing: 2) {
                        Image(systemName: "chevron.backward")
                            .foregroundColor(Color(color))

                        if let text = text {
                            Text(text)
                                .foregroundColor(Color(color))
                        }
                    }
                })
            )
    }
}

extension View {
    func navigationBackButton(color: UIColor, text: String? = nil) -> some View {
        modifier(NavigationBackButton(color: color, text: text))
    }
}

使用方法非常简单，只需在导航链接的目标视图上使用此修饰符即可。

带有文字的后退按钮：

.navigationBackButton(color: .white, text: "Back")

无文字的后退按钮：

.navigationBackButton(color: .white)

Answer 8

let navBarAppearance = UINavigationBarAppearance()
navBarAppearance.backButtonAppearance.normal.titleTextAttributes = [.foregroundColor: UIColor.white]

Answer 9

。

Answer 10

iOS 16

中，

.accentColor

被标记为已弃用。请使用

.tint

来代替。

NavigationStack {
        List {
              NavigationLink("Action_1") {
                  Action_1_View()
              }
              NavigationLink("Action_2") {
                  Action_2_View()
              }
        }
  }
  .tint(.gray)

Answer 11

Answer 12