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

【问题标题】：How to change color of back button on NavigationView如何更改 NavigationView 上的后退按钮的颜色
【发布时间】：2019-10-25 08:33:13
【问题描述】：

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

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

【问题讨论】：

标签： swiftui back-button

【解决方案1】：

您可以尝试将foregroundColor 或accentColor 设置为NavigationView（在倒数第二个右括号之后）

【讨论】：

【解决方案2】：

我怀疑这是 正确的 方法，但我通过修改 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()
}

【讨论】：

是的，如果我想更改所有这些，那会起作用，但我只想在我有不同背景颜色的单个屏幕上更改它

【解决方案3】：

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

UINavigationBar.appearance().tintColor = .black

【讨论】：

【解决方案4】：

这对我有用：

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

【讨论】：

【解决方案5】：

您可以使用 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。
非常 swiftui 地道，很好的解决方案。
不错的解决方案，但如果您使用的是 XCode 12，您可能会对我的回答感兴趣。

【解决方案6】：


.navigationBarBackButtonHidden(true)
        .navigationBarItems(leading:
                Button(action: {presentation.wrappedValue.dismiss()}, label: {
                    HStack {
                    Image(systemName: "chevron.backward")
                        .foregroundColor(Color(UIColor.darkGray))
                    Text(username)
                        .foregroundColor(Color(UIColor.darkGray))
                        .font(UIHelper.largeSize())
                    }
                })

【讨论】：

【解决方案7】：

为 NavigationView 添加 .accentColor 修饰符，如下所示

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

【讨论】：

【解决方案8】：

如果您使用的是 XCode 12，请考虑在 Assets.xcassets 中设置 AccentColor。 XCode 将为应用程序中的所有导航返回按钮使用此颜色。

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

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

【讨论】：

【解决方案9】：

您好，也许为时已晚，但根据之前的答案，我制作了视图修饰符，它允许您更改颜色或添加文本。这种方法将避免您在任何需要返回按钮的地方编写样板代码。

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)

【讨论】：