如何在 SwiftUI 中使用 navigationBarLeading 位置更改 ToolbarItem 的颜色答案

【问题标题】：How to change color of ToolbarItem with navigationBarLeading placement in SwiftUI如何在 SwiftUI 中使用 navigationBarLeading 位置更改 ToolbarItem 的颜色
【发布时间】：2020-10-21 16:02:17
【问题描述】：

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

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

问题是它显示为蓝色并作为一个按钮。是否有可能以某种方式将其颜色更改为黑色？ foregroundColor、accentColor 不工作。另外，我尝试使用带有Text("Title") 的禁用按钮。但在那种情况下它显示为灰色。没有应用颜色，也没有应用PlainButtonStyle。

【问题讨论】：

标签： swiftui toolbar

【解决方案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)

但是，如果您希望此 Text 表现得像 Text 而不是 Button，您可以使用以下 hack：

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

【讨论】：

这是一个很棒的解决方案 - 尝试过，但不知道它只能通过将其设置为 NavigationView 来修复。但文本仍会自动变为按钮。只有 UIViewRepresentable 将文本保留为文本
@Lonkly 如果您只添加一个文本（在当前版本的 SwiftUI 中），这就是工具栏的工作方式。如果添加两个包裹在 HStack 中的文本，它的行为会有所不同。
我无法让 VStack { // ... }.accentColor() 仅更改一个工具栏项的颜色。我将 VStack 放在 ToolbarItem() 内，围绕 Text()，如下所示： ToolbarItem(placement: .navigationBarTrailing) { VStack { Text("hi") }.accentColor(.red)。这是你的意思还是我做错了？
@Gary 在第一个解决方案中，NavigationView 上的 .accentColor(.black) 改变了工具栏项的颜色（不是 VStack 上的 .accentColor(.accentColor)）。它会更改所有工具栏项的颜色。如果要更改特定项目，则需要第二种解决方案（使用HStack）。
啊，谢谢。它现在适用于单个项目。事实上，只要我使用 .foregroundColor() 并添加一个空的 Text("")，它就可以与 VStack 和 HStack 一起使用。希望这种使用空文本的技巧不会在下一次更新中中断:)

【解决方案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)))

【讨论】：

【解决方案3】：

考虑到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
}

【讨论】：

这对我不起作用。你能提供带有工具栏的整个结构吗？