SwiftUI MenuBarExtra 在菜单栏中具有自定义视图，而不仅仅是图标和标签

Question

我读到可以在 Swift macOS 应用程序中使用

MenuBarExtra

来创建菜单栏应用程序。带有标签的图标可以显示在菜单栏中。但是，单击该条目会打开一个包含丰富内容的上下文菜单。 我想使用这个简单、方便且小的代码，但我需要显示自定义视图，而不是仅显示图标和标签。该视图将包含多个不同颜色的标签，并将不断更新。这可以用

MenuBarExtra

实现吗？我还没有代码。例如iStat就有这样的菜单。

Answer 1

根据我在 macOS 13.5.2 上的测试，您无法使用

MenuBarExtra

执行此操作。您需要使用 AppKit 中的

NSStatusItem

API。

Answer 2

使用这个：

import SwiftUI

@main
struct DesktopTestApp: App {
    
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        
        // Add this line ---->
        MenuBarExtra("App", systemImage: "square.stack.3d.down.forward") {
            VStack {
                Text("hello world")
                // your views goes here
            }
            .frame(width: 300, height: 300)
            .background(.windowBackground)
        }.menuBarExtraStyle(.window)
        // ------------------------ 
    }  
}

Answer 3

可以通过将自定义视图渲染为带有

MenuBarExtra

的

NSImage

来使用自定义视图作为

ImageRenderer

标签，如下所示：

@main
struct TestApp: App {
    @StateObject private var appIconRenderer = ImageRenderer(content: TestAppIcon())
    
    var body: some Scene {
        MenuBarExtra {
            VStack {
                Button {} label: { Text("Menu item 1") }
                Button {} label: { Text("Menu item 2") }
            }
        } label: {
            if let appIconImage = appIconRenderer.nsImage {
                Image(nsImage: appIconImage)
            } else {
                // Only for Xcode previews
                Image(systemName: "exclamationmark.triangle")
            }
        }
    }
}

struct TestAppIcon: View {
    var body: some View {
        HStack(spacing: 0) {
            Image(systemName: "microphone")
            Image(systemName: "speaker")
        }
    }
}