macOS状态栏应用中List组件显示异常问题求助

问题场景 #

在macOS状态栏应用的Popover中使用SwiftUI，内部用ZStack时显示正常：

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

将内部ZStack替换为List后，Popover顶部的三角指示标消失，且位置出现偏移：

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)
    }
}

解决方法 #

1. 禁用List滚动 #

List默认的滚动视图会干扰Popover的尺寸计算逻辑，若列表内容无需滚动，直接禁用滚动功能：

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

2. 显式设置Popover尺寸 #

在setupPopover方法中直接指定Popover的固定尺寸，避免依赖SwiftUI视图的自动尺寸计算：

func setupPopover() {
    popover = NSPopover()
    popover.behavior = .transient
    popover.contentViewController = PopoverViewController().makeNSViewController()
    popover.contentSize = NSSize(width: 320, height: 400)
}

同时可移除ContentView外层的frame(width: 320, height: 400)，让Popover的尺寸完全由contentSize控制。

3. 用VStack模拟List效果 #

如果不需要List的交互特性（如选择、滑动删除），可以用LazyVStack替代List，避免滚动视图带来的布局异常：

struct ContentView: View {
    var body: some View {
        ZStack {
            LazyVStack {
                ForEach(1..<10) { index in
                    Text("Index-\(index)")
                        .padding(.vertical, 8)
                        .frame(maxWidth: .infinity, alignment: .leading)
                }
            }
            .frame(maxWidth: .infinity, maxHeight: 100)
            .background(Color(.windowBackgroundColor))
        }.frame(width: 320, height: 400)
    }
}

4. 修正HostingView布局约束 #

确保NSHostingView正确填充父视图，消除尺寸计算偏差：

struct PopoverViewController: NSViewControllerRepresentable {
    func makeNSViewController(context: Context) -> NSViewController {
        let viewController = NSViewController()
        let hostingView = NSHostingView(rootView: ContentView())
        hostingView.translatesAutoresizingMaskIntoConstraints = false
        viewController.view.addSubview(hostingView)
        
        NSLayoutConstraint.activate([
            hostingView.topAnchor.constraint(equalTo: viewController.view.topAnchor),
            hostingView.leadingAnchor.constraint(equalTo: viewController.view.leadingAnchor),
            hostingView.trailingAnchor.constraint(equalTo: viewController.view.trailingAnchor),
            hostingView.bottomAnchor.constraint(equalTo: viewController.view.bottomAnchor)
        ])
        
        return viewController
    }
    
    func updateNSViewController(_ nsViewController: NSViewController, context: Context) {}
}

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