如何更改NavigationView上返回按钮的颜色

44

当您点击按钮时,它会带您到一个新的视图,并在左上方放置一个返回按钮。我无法确定哪个属性控制后退按钮的颜色。我尝试添加accentColor和foregroundColor,但它们只编辑视图内的项目。

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

112

您可以使用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()
}

这是根据所有答案的最佳实践。这是唯一的 SwiftUI 方式,而且不需要全局编辑 SceneDelegate。 - eResourcesInc
非常SwiftUI惯用,很棒的解决方案。 - cgiacomi
不错的解决方案,但如果你正在使用XCode 12,你可能会对我的答案感兴趣。 - Ella Gogo
6
"accentColor"现在被标记为即将过时,并建议使用“使用资源目录中的强调颜色或View.tint(_ :)代替”。我已经尝试过使用“tint”,但这只会渲染通过“toolbar()”修改器添加的额外按钮。 - FateNuller
1
我也无法使用tint使其正常工作,而且我不能使用资源目录,因为我有许多不同的用户主题样式。 - Darren

12

我也曾尝试过相同的事情,但目前似乎还没有SwiftUI的解决方案。但如果适用于你的用例,其中一个可以完成工作的方法是使用UIKit的外观设置:

UINavigationBar.appearance().tintColor = .black


7
此解决方案在 iOS 16 中已不再适用。 - cseh_17
UINavigation bar外观色调在iOS 16中无法工作 - Araxias

10

Asset Catalog 解决方案

在 Asset Catalog(Assets.xcassets)中添加AccentColor集合。Xcode 将应用你在此颜色集合中指定的颜色作为你的应用程序的强调颜色。

简单解决方案

在 Asset Catalog 中添加 Accent Color 后,你的导航栏返回按钮将会变成该颜色。这就是你所需要的全部内容。

更多细节

如果你的应用程序没有 AccentColor 颜色集合,请按照以下步骤手动创建一个颜色集合:

  1. 在项目导航器中,选择一个资源目录。
  2. 点击大纲视图底部的添加按钮(+)。
  3. 在弹出菜单中,选择 Color Set。新的颜色集合将出现在大纲视图中并在详细信息区域中打开。
  4. 双击大纲视图中的颜色集合名称以使用描述性名称重命名颜色集合,并按回车键。
  5. 在构建设置中,查找“全局强调颜色名称”的构建设置。双击构建设置,输入你的强调颜色集合的名称,然后按回车键。

从代码中访问强调颜色

默认情况下,你的强调颜色适用于所有使用着色器颜色的应用程序视图和控件,除非你为视图层次结构的特定子集覆盖了该颜色。但是,你可能希望将强调颜色纳入不依赖于着色器颜色的其他部分的用户界面中,例如静态文本元素。

要从资源目录中的 AccentColor 中在代码中使用强调颜色值,请像这样加载颜色:

SwiftUI

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

UIKit

label.textColor = UIColor.tintColor

什么是强调色?

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

强调色

有关此主题的更多信息,请查看文档


1
这在Xcode 14.3上运行正常。 - Lawrence Gimenez

8
像下面示例一样,在NavigationView中添加 .accentColor 修饰符。
NavigationView {
    Text("Hello World")
      .toolbar {
                    ToolbarItem(placement: .navigationBarLeading) {
                        Button("Close") { }
                    }
            }
 }
 .accentColor(.themeColor)

8

我怀疑这可能不是做这件事的正确方式,但是通过修改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()
}

1
是的,如果我想要更改所有屏幕的话,那会起作用,但我只想在一个单独的屏幕上更改它,在那里我有不同的背景颜色。 - Michael St Clair

6
如果您正在使用 XCode 12,请考虑在 Assets.xcassets 中设置 AccentColor。XCode 将使用此颜色来为应用程序中的所有导航返回按钮着色。
请注意,这也会影响其他 UI 元素之一是按钮。您始终可以使用 accentColor 修改器覆盖此设置。
Button("Button With Different Accent Color") { 
   // do something useful
}
.accentColor(.red)

完美的解决方案,可更改所有控件组件(包括后退按钮)的默认颜色。请注意,“accentColor(...)”即将被弃用,Apple现在建议改用“tint(...)”,当直接应用于控件时(如此解决方案的示例),它似乎有效,但是当应用于NavigationView时不会更改Back按钮的颜色(这是OP的愿望)。我不确定Apple未来希望开发人员如何对诸如后退按钮之类的控件应用异常,但他们的目标可能是阻止这种做法。 - Nathan Hosselton

4

也许现在已经有点晚了,但基于之前的回答,我创建了一个视图修饰符,允许你更改颜色或添加文本。这种方法可以避免你在需要返回按钮的每个地方都写样板代码。

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)

1
尽可能避免重写系统组件。 您正在失去左上角的拖动,长按本机返回按钮。 - Florian

3

这对我有效:

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

有趣的是,这导致我的代码崩溃了 :P - JRafaelM

1
在iOS 16中,.accentColor被标记为已弃用。请改用.tint。
NavigationStack {
        List {
              NavigationLink("Action_1") {
                  Action_1_View()
              }
              NavigationLink("Action_2") {
                  Action_2_View()
              }
        }
  }
  .tint(.gray)

0
在iOS 16中,苹果公司添加了一种新的解决方法,前往Assets.xcassets添加新的颜色集名称“AccentColor”,如果不存在的话。并设置它的值。iOS将从这里示例图片选择背景按钮的颜色。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接