macOS 托盘应用程序中的列表显示异常

Question

我的代码非常简单。

struct ContentView: View {
    var body: some View {
        ZStack {
            ZStack {
                
            }.frame(maxWidth: .infinity, maxHeight: .infinity).background(Color.red)
            
        }.frame(width: 320, height: 400)
    }
}

此代码正常显示如下：

如果我将内部

ZStack

更改为

List

，如下所示：

struct ContentView: View {
    var body: some View {
        ZStack {
            List {
                ForEach(1..<10) { index in
                    Text("Index-\(index)")
                }
            }.frame(maxWidth: .infinity, maxHeight: 100)
        }.frame(width: 320, height: 400)
    }
}

顶部的三角形消失了，弹出窗口的位置很奇怪。

我想知道如何解决这个问题。

其他一些代码：

@main
struct VeryToDoApp: App {
    
    @NSApplicationDelegateAdaptor var delegate: AppDelegate
    
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

class AppDelegate: NSObject, NSApplicationDelegate {
    var statusItem: NSStatusItem!
    var popover: NSPopover!
    
    override init() {
        
    }
    
    func applicationDidFinishLaunching(_ notification: Notification) {
        setupStatusBarItem()
        setupPopover()
    }
    
    func setupStatusBarItem() {
        statusItem = NSStatusBar.system.statusItem(withLength: NSStatusItem.squareLength)
        
        if let button = statusItem.button {
            let imageSize = NSSize(width: 22, height: 22)
            button.image = NSImage(named: "AppIcon")
            button.image?.size = imageSize
            button.action = #selector(togglePopover(_:))
        }
    }
    
    func setupPopover() {
        popover = NSPopover()
        popover.behavior = .transient
        popover.contentViewController = PopoverViewController().makeNSViewController()
    }
    
    @objc func togglePopover(_ sender: AnyObject?) {
        if popover.isShown {
            closePopover(sender)
        } else {
            showPopover(sender)
        }
    }
    
    func showPopover(_ sender: AnyObject?) {
        if let button = statusItem.button {
            popover.show(relativeTo: button.bounds, of: button, preferredEdge: NSRectEdge.minY)
        }
    }
    
    func closePopover(_ sender: AnyObject?) {
        popover.performClose(sender)
    }
    
}

struct PopoverViewController: NSViewControllerRepresentable {
    func makeNSViewController(context: Context) -> NSViewController {
        return makeNSViewController()
    }
    
    func makeNSViewController() -> NSViewController {
        let viewController = NSViewController()
        viewController.view = NSHostingView(rootView: ContentView())
        return viewController
    }
    
    func updateNSViewController(_ nsViewController: NSViewController, context: Context) {
        // Update code if needed
    }
}

Answer 1

使用 SwiftUI 的原生

MenuBarExtra

与

.menuBarExtraStyle(.window)

import SwiftUI

@main
struct HelloMenuBarApp: App {
    @State private var selectedAnimal: String?
    private let animals = ["Lions", "Tigers", "Bears"]
    
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        MenuBarExtra {
            List(selection: $selectedAnimal) {
                ForEach(["Lions", "Tigers", "Bears"], id: \.self) { animal in
                    Button(action: {
                        print("\(animal)! Oh my!")
                    }, label: {
                        Text(animal)
                    })
                    .tag(animal)
                    .buttonStyle(BorderlessButtonStyle())
                }
            }
            .frame(width: 320, height: 400)
        } label: {
            Image(systemName: "tray.2.fill")
        }
        .menuBarExtraStyle(.window)
    }
}