如何在SwiftUI中更改navigationBarLeading位置的ToolbarItem的颜色

Question

我需要一个标题在导航栏左侧。我使用以下代码：

.toolbar {
    ToolbarItem(placement: .navigationBarLeading) {
        Text("Title")
            .foregroundColor(.black)
    }
}

问题在于它显示为蓝色按钮。有没有办法将其颜色改为黑色？ "foregroundColor"， "accentColor" 都不起作用。我还尝试使用禁用的按钮，并在内部使用 "Text（“标题”）"。但在那种情况下它是灰色的。既没有应用颜色，也没有使用 "PlainButtonStyle"。

- Ihor Vovk

Answer 1

默认情况下，如果您添加单个Text ，它将显示为一个Button。

然后，要更改其颜色，您需要设置NavigationView的accentColor（因为此按钮显示在导航栏中）：

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Test")
                .toolbar {
                    ToolbarItem(placement: .navigationBarLeading) {
                        Text("Title")
                    }
                }
        }
        .accentColor(.black)
    }
}

如果您不想更改整个NavigationView中的accentColor，可以执行以下操作：

NavigationView {
    VStack {
        //...
    }
    .accentColor(.accentColor)
}
.accentColor(.black)

---

然而，如果您希望此文本表现得像文本而不是像按钮，则可以使用以下技巧：

ToolbarItem(placement: .navigationBarLeading) {
    HStack {
        Text("Title")
        Text("")
    }
    .foregroundColor(.red)
}

- pawello2222

---

这是一个很棒的解决方案 - 我尝试过了，但不知道只有将其设置为 NavigationView 才能修复它。但文本仍然会自动变成按钮。只有 UIViewRepresentable 可以将文本保持为文本。 - Vivienne Fosh

@Lonkly 这只是工具栏的工作方式，如果您只添加一个文本（在当前版本的SwiftUI中）。如果您添加两个包含在HStack中的文本，则其行为会有所不同。 - pawello2222

我无法让 VStack { // ... }.accentColor() 正常工作，以便更改仅一个工具栏项的颜色。我将 VStack 放在 ToolbarItem() 中，围绕 Text()，像这样：ToolbarItem(placement: .navigationBarTrailing) { VStack { Text("hi") }.accentColor(.red)。这是您所想要的吗？还是我做错了什么？ - Gary

@Gary 在第一个解决方案中，是NavigationView上的.accentColor（.black）改变了工具栏项目的颜色（而不是VStack上的.accentColor（.accentColor））。它会为所有的工具栏项目改变颜色。如果你想要改变特定的项目，你需要第二个解决方案（使用HStack）。 - pawello2222

啊，谢谢。现在可以针对个别项目使用了。实际上只要使用“.foregroundColor()”并添加一个空的“Text(“”)”，无论是 VStack 还是 HStack 都可以工作。希望这种使用空文本的方法不会在下一次更新中出问题 :) - Gary

有没有一种方法可以使用UIAppearance为所有导航视图设置“accentColor”？ - JAHelia

Answer 2

使用自定义样式的空菜单，而不是更改accentColor。

    .toolbar {
         ToolbarItem(placement: .navigationBarTrailing) {
             Menu(content: {
              
             }, label: {
                Text("Hello")
             })
             .menuStyle(RedMenuStyle())
         }
     }



struct RedMenuStyle : MenuStyle {
    func makeBody(configuration: Configuration) -> some View {
        Menu(configuration)
            .font(Font.system(size: 50))
            .foregroundColor(Color.red)
    }
}

如果只显示文本，应使用navigationBarItems。

    .navigationBarItems(leading: Text("Hello")
                                 .foregroundColor(Color.red)
                                 .font(Font.system(size: 50)))

- mahan

Answer 3

对我来说，使用 tint 这个方法起作用了。

.toolbar {
    ToolbarItem(placement: .navigationBarLeading) {
        Button {

        } label: {
            Image(systemName: "arrow.backward")
                .bold()
        }
    }
}
.tint(.white)

- pableiros

Answer 4

考虑到ToolbarItem没有可用的修饰符，我唯一能想到的解决方案是使用UIViewRepresentable，它似乎忽略了工具栏的修改:

.toolbar {
   ToolbarItem(placement: .navigationBarLeading) {
      TitleRepresentation(title: "Test", titleColor: .red)
   }
}

...

struct TitleRepresentation: UIViewRepresentable {
    let title: String
    let titleColor: UIColor
    
    func makeUIView(context: Context) -> UILabel {
        let label = UILabel()
        label.tintColor = titleColor
        label.text = title
        return label
    }
    
    func updateUIView(_ uiView: UILabel, context: Context) {}

    typealias UIViewType = UILabel
}

- Vivienne Fosh

---

这对我没有用。你能提供整个带有工具栏的结构体吗？ - user2641891