如何在macOS的SwiftUI中正确调整自定义MenuBarExtra图标尺寸？

问题描述 #

正在学习用SwiftUI在macOS中创建MenuBarExtra，使用SF Symbol作为图标时一切正常，但自定义图片遇到以下问题：

• 直接引用Assets中的原图，MenuBarExtra不会自动缩放，图标在菜单栏显示过大；添加.renderingMode(.template)后，常规的resizable、frame等缩放修饰符也无效，图标依旧偏大。
• 手动将原图缩小为16x16（2倍图32x32）后，尺寸符合要求，但图标显示模糊、像素化——这张图在之前的NoMAD部署中显示清晰，对比效果如下：
  • 对比1：右侧为未修改原图的MenuBarExtra图标，左侧为NoMAD中的原图标，两者同源，右侧尺寸过大
  • 对比2：右侧为缩小到16x16后的MenuBarExtra图标，显示严重像素化
• 更新：不止菜单栏图标，后续添加的五张高清图标也出现同样问题——尺寸符合布局，但在Retina显示屏上像素化严重，调整图片压缩方式无改善。

附相关代码 #

import SwiftUI

@main
struct menubartestappApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        MenuBarExtra {
            VStack {
                Text("Hello, world!")
            }
            .padding()
        } label: {
            Image("frond-icon")
                .renderingMode(.template)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .scaledToFit()
                .frame(width: 16, height: 16, alignment: .center)
        }
        .menuBarExtraStyle(.menu)
    }
}

解决方法 #

1. 正确配置Assets图片集 #

不要手动缩小原图，将高清源图（如1024x1024的PNG或SVG）导入Assets并设置为Image Set：

• 在Attributes Inspector中勾选Mac支持，为不同分辨率设置对应切片：
  • 1x：16x16（适配非Retina屏）
  • 2x：32x32（Retina屏默认）
  • 3x：48x48（高DPI屏）
• 将图片的Render As设置为Template Image，和代码中的.renderingMode(.template)对应。

2. 简化MenuBarExtra的Label布局 #

不需要叠加多个缩放修饰符，简化代码即可：

MenuBarExtra {
    VStack {
        Text("Hello, world!")
    }
    .padding()
} label: {
    Image("frond-icon")
        .resizable()
        .frame(width: 16, height: 16)
}
.menuBarExtraStyle(.menu)

• 重复的.aspectRatio(contentMode: .fit)和.scaledToFit()会干扰布局，保留.resizable()配合.frame()足够控制尺寸。

3. 优先使用矢量图（SVG） #

将图标转为SVG格式导入Assets，矢量图在任何分辨率下都不会模糊，是macOS菜单栏图标的最优选择——Assets会自动生成各分辨率的适配版本，无需手动处理。

4. 检查项目高分辨率支持 #

• 确认项目Info.plist中的NSHighResolutionCapable设置为YES（默认开启，可手动检查）
• 在Xcode项目设置的Deployment Info中，勾选Retina支持。

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