如何在MenuBarExtra中使用带变量值的系统图像？

MenuBarExtra的systemImage初始化参数确实没有提供variableValue选项，但你可以通过自定义Label视图作为MenuBarExtra的label参数来实现带变量值的系统图标效果。

核心思路是：放弃使用MenuBarExtra自带的systemImage参数，转而直接构建包含variableValue系统图标的自定义View作为label。

代码示例1：直接构建自定义Label #

MenuBarExtra {
    // 菜单栏下拉菜单内容
    Button("执行操作") {
        // 你的逻辑代码
    }
} label: {
    // 自定义label：图标+文字（无需文字可仅保留Image）
    HStack(spacing: 4) {
        Image(systemName: "cellularbars", variableValue: 0.5)
            .imageScale(.large) // 适配菜单栏图标大小
        Text("显示信号强度")
            .font(.system(size: 12)) // 调整文字大小适配菜单栏
    }
    .foregroundColor(.primary)
}

代码示例2：封装可复用的可变系统Label #

如果需要在多处使用，建议封装成可复用View：

struct VariableSystemIconLabel: View {
    let title: String
    let systemImageName: String
    let variableValue: Double
    let showText: Bool
    
    init(title: String, systemImageName: String, variableValue: Double, showText: Bool = true) {
        self.title = title
        self.systemImageName = systemImageName
        self.variableValue = variableValue
        self.showText = showText
    }
    
    var body: some View {
        HStack(spacing: showText ? 4 : 0) {
            Image(systemName: systemImageName, variableValue: variableValue)
                .imageScale(.large)
            if showText {
                Text(title)
                    .font(.system(size: 12))
            }
        }
        .foregroundColor(.primary)
    }
}

// 使用方式
MenuBarExtra {
    Button("设置") { /* 逻辑代码 */ }
} label: {
    VariableSystemIconLabel(
        title: "显示信号强度",
        systemImageName: "cellularbars",
        variableValue: 0.7,
        showText: false // 仅显示图标
    )
}

为什么直接用Label不行？ #

默认的Label(systemImage:)初始化方法未暴露variableValue参数，它内部创建的是不带变量的系统图标。通过手动创建带variableValue的Image并组合成自定义View，就能绕过这个限制。

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