iOS 17 SwiftUI中导航栏ToolbarItem图标颜色无法修改问题

在iOS 17中，导航栏内的ToolbarItem控件会默认继承导航栏的tint颜色，直接给Label设置foregroundStyle可能被全局样式覆盖，导致图标仍显示默认蓝色。以下是几种可行的解决方案：

方案1：全局统一导航栏色调 #

如果希望整个导航栏的交互元素（包括返回按钮、Toolbar控件等）都使用绿色，可以直接给NavigationStack设置tint属性：

struct SwiftUITestView: View {
    var body: some View {
        NavigationStack{
            HStack{
                Text("test")
                Menu{
                    Button{
                        print("test")
                    }label:{
                        Text("test")
                    }
                } label:{
                    Label("Filter", systemImage: "line.3.horizontal.circle.fill")
                        .foregroundStyle(.green)
                        .frame(width: 20, height: 20)
                }
                .menuActionDismissBehavior(.disabled)
            }
            .toolbar(content: {
                ToolbarItem(placement: .topBarTrailing) {
                    Menu{
                        Button{
                            print("test")
                        }label:{
                            Text("test")
                        }
                    } label:{
                        Label("Filter", systemImage: "line.3.horizontal.circle.fill")
                            .frame(width: 20, height: 20)
                    }
                    .menuActionDismissBehavior(.disabled)
                }
            })
        }
        .tint(.green) // 全局设置导航栏tint颜色
    }
}

方案2：单独指定Label的图标和文本颜色 #

如果只想修改这个特定Menu的颜色，不影响导航栏其他元素，可以拆分Label的图标和文本部分，分别设置前景色：

ToolbarItem(placement: .topBarTrailing) {
    Menu{
        Button{
            print("test")
        }label:{
            Text("test")
        }
    } label:{
        Label {
            Text("Filter")
                .foregroundStyle(.green)
        } icon: {
            Image(systemName: "line.3.horizontal.circle.fill")
                .foregroundStyle(.green)
        }
        .frame(width: 20, height: 20)
    }
    .menuActionDismissBehavior(.disabled)
}

方案3：为Menu单独设置tint #

直接给Toolbar内的Menu添加tint属性，强制覆盖导航栏的默认色调：

ToolbarItem(placement: .topBarTrailing) {
    Menu{
        Button{
            print("test")
        }label:{
            Text("test")
        }
    } label:{
        Label("Filter", systemImage: "line.3.horizontal.circle.fill")
            .frame(width: 20, height: 20)
    }
    .menuActionDismissBehavior(.disabled)
    .tint(.green) // 单独为Menu设置tint颜色
}

内容的提问来源于stack exchange，提问作者Zach