如何更改 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

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

Answer 2

我怀疑这是正确的方法，但我通过修改SceneDelegate.swift设置window色调使它起作用.

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 3

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

UINavigationBar.appearance().tintColor = .black

Answer 4

这对我有用：

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

Answer 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()
}

Answer 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())
                    }
                })

Answer 7

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

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

Answer 8

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

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

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

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

而且用法非常简单，只需在导航的目的地视图上使用此修饰符即可 link。

带有文本的后退按钮：

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

没有文本的后退按钮：

.navigationBackButton(color: .white)

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

How to change color of back button on NavigationView

back-button

swiftui