如何在macOS SwiftUI中创建规范的下拉工具栏项？

问题1：下拉箭头与图标无间距 #

直接用Image作为Menu的label时，系统不会自动添加箭头和图标的间距，换成Label组件（仅显示图标）就能让系统自动处理间距，完全符合统一工具栏的规范：

Menu {
    // 菜单项保持不变
} label: {
    Label("Settings", systemImage: "gear")
        .labelStyle(.iconOnly) // 仅显示图标，隐藏文字
}

如果不想用Label，也可以手动给Image加右侧内边距，但推荐用Label更贴合系统设计：

Image(systemName: "gear")
    .padding(.trailing, 4)

问题2：图标颜色灰显/启动时偶尔变黑 #

核心原因 #

• 灰显通常是Menu或上级控件被误标记为disabled，大概率是applicationSupportDirectory初始化时机延迟，导致启动时误判为nil。
• 启动时的黑色图标属于SwiftUI渲染时序bug，和工具栏样式加载顺序有关。

解决办法 #

1. 精准控制启用状态：
   单独控制每个菜单项的禁用状态，而非让整个Menu受影响。如果需要禁用整个Menu，绑定到可靠的状态变量，避免依赖异步初始化的值：

   Menu {
       // 菜单项保持不变
   } label: {
       Label("Settings", systemImage: "gear")
           .labelStyle(.iconOnly)
   }
   // 仅在必要时禁用整个菜单，取消注释即可
   // .disabled(applicationSupportDirectory == nil)
   

2. 强制统一图标色调：
   给label添加tint(.primary)强制使用系统默认主色调，解决启动时的黑色渲染问题：

   Label("Settings", systemImage: "gear")
       .labelStyle(.iconOnly)
       .tint(.primary)
   

3. 遵循系统工具栏规范：
   保持windowToolbarStyle为.unified或.unifiedCompact，避免自定义过多颜色样式，让系统自动处理不同状态下的外观切换。

完整修正代码 #

var body: some Scene {
    WindowGroup {
        ContentView()
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .navigationTitle("Title")
            .toolbar {
                ToolbarItem(placement: .primaryAction) {
                    Menu {
                        Button {
                            // 打开缓存目录逻辑
                        } label: {
                            Text("Open cache directory")
                        }
                        .help("Show application support folder")
                        .disabled(applicationSupportDirectory == nil)
                        
                        Button {
                            // 清除缓存逻辑
                        } label: {
                            Text("Clear cache")
                        }
                        .help("Clears all content from the cache")
                        .disabled(applicationSupportDirectory == nil)
                    } label: {
                        Label("Settings", systemImage: "gear")
                            .labelStyle(.iconOnly)
                            .tint(.primary)
                    }
                }
            }
    }
    .windowToolbarStyle(.unified)
}

额外注意事项 #

• 避免手动修改Toolbar控件的颜色，依赖系统tint自动适配浅色/深色模式。
• 将applicationSupportDirectory的初始化放在init()或onAppear中，确保启动时快速获取有效值，减少状态波动导致的控件异常。

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