如何用SwiftUI创建Mac动态菜单栏图标（MenuBarExtra兼容问题）

1. 修复自定义图片缩放异常 #

菜单栏图标有固定的最佳尺寸（通常22x22pt），直接使用自定义图片时需显式约束尺寸并适配：

MenuBarExtra("My App", systemImage: "") {
    // 菜单内容区域
} label: {
    Image("custom-icon")
        .resizable()
        .scaledToFit()
        .frame(width: 22, height: 22)
        .padding(2) // 微调边距避免边缘截断
}

2. 实现动态菜单栏图标（仿电池样式） #

用状态变量驱动视图变化，模拟类似电池图标的动态效果：

struct DynamicBatteryIcon: View {
    var batteryLevel: Double // 外部传入的电量值，范围0-1
    
    var body: some View {
        ZStack {
            // 电池外框
            RoundedRectangle(cornerRadius: 3)
                .stroke(Color.primary, lineWidth: 2)
                .frame(width: 22, height: 12)
            // 电池顶部凸起
            Rectangle()
                .fill(Color.primary)
                .frame(width: 3, height: 6)
                .offset(x: 12, y: 0)
            // 电量填充部分
            RoundedRectangle(cornerRadius: 1)
                .fill(batteryLevel > 0.2 ? Color.green : Color.red)
                .frame(width: 18 * batteryLevel, height: 8)
                .offset(x: -8 + (18 * (1 - batteryLevel))/2, y: 0)
        }
        .frame(width: 24, height: 14)
    }
}

// 使用示例
MenuBarExtra("Battery Monitor", systemImage: "") {
    Button("模拟满电") {
        // 这里更新电量状态
    }
    Button("模拟低电") {
        // 这里更新电量状态
    }
} label: {
    DynamicBatteryIcon(batteryLevel: 0.7)
}

3. 避免交互失效的核心要点 #

不要直接通过NSStatusBarButton替换视图（这会破坏SwiftUI的交互链路），坚持用SwiftUI原生的MenuBarExtra label参数传递动态视图。如果需要跨组件更新图标状态，用@ObservableObject统一管理：

class AppState: ObservableObject {
    @Published var currentBatteryLevel: Double = 0.5
}

struct ContentView: View {
    @StateObject private var appState = AppState()
    
    var body: some View {
        MenuBarExtra("Battery Monitor", systemImage: "") {
            Button("增加10%电量") {
                appState.currentBatteryLevel = min(appState.currentBatteryLevel + 0.1, 1.0)
            }
            Button("减少10%电量") {
                appState.currentBatteryLevel = max(appState.currentBatteryLevel - 0.1, 0.0)
            }
        } label: {
            DynamicBatteryIcon(batteryLevel: appState.currentBatteryLevel)
        }
    }
}

额外注意事项 #

• 自定义图片需准备2x、3x分辨率版本，避免模糊
• 如需适配深浅模式，可给图片资源添加明暗变体，或通过@Environment(\.colorScheme)手动切换颜色
• 测试时确保MenuBarExtra的visibility设置符合需求（默认.automatic，也可设为.visible强制显示）

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