如何动态观测SwiftUI List内容高度，实现macOS弹窗高度自适应？

针对你在macOS弹窗内开发SwiftUI应用遇到的高度自适应问题，可通过PreferenceKey + GeometryReader捕获List完整内容高度，结合NSPopover API动态调整弹窗尺寸，满足以下需求：

1. 弹窗最大高度限制为500
2. 内容较少时自动收缩适配（头部+List内容+尾部）
3. List增删项时实时调整高度

实现步骤 #

1. 定义自定义PreferenceKey传递高度值

用于在视图层级间传递List的完整内容高度：

struct ContentHeightPreferenceKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

2. 在List中嵌入GeometryReader捕获高度

通过background给List添加GeometryReader，捕获包含不可见项在内的完整内容高度，并通过PreferenceKey传递：

List(items, id: \.self) { item in
    Text(item)
}
.background(
    GeometryReader { geo in
        Color.clear
            .preference(key: ContentHeightPreferenceKey.self, value: geo.size.height)
    }
)

3. 监听高度变化并调整弹窗尺寸

在弹窗根视图中监听PreferenceKey的高度值，计算总高度（头部+List内容+尾部），并限制最大高度为500，最后调用NSPopover API调整尺寸：

.onPreferenceChange(ContentHeightPreferenceKey.self) { newHeight in
    contentHeight = newHeight
    adjustPopoverHeight()
}

private func adjustPopoverHeight() {
    let totalHeight = contentHeight + headerHeight + footerHeight
    let targetHeight = min(totalHeight, maxPopoverHeight)
    
    // 获取当前弹窗实例并调整高度
    if let popover = NSApp.currentEvent?.window?.popover {
        popover.contentSize = CGSize(width: popover.contentSize.width, height: targetHeight)
    }
}

完整代码示例 #

import SwiftUI

// 自定义PreferenceKey传递内容高度
struct ContentHeightPreferenceKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

struct PopoverContentView: View {
    @Binding var items: [String]
    @State private var contentHeight: CGFloat = 0
    let headerHeight: CGFloat = 40
    let footerHeight: CGFloat = 30
    let maxPopoverHeight: CGFloat = 500
    
    var body: some View {
        VStack(spacing: 0) {
            // 头部视图
            Text("头部区域")
                .frame(height: headerHeight)
                .background(Color.gray.opacity(0.2))
            
            // 带高度捕获的List
            List(items, id: \.self) { item in
                Text(item)
            }
            .background(
                GeometryReader { geo in
                    Color.clear
                        .preference(key: ContentHeightPreferenceKey.self, value: geo.size.height)
                }
            )
            
            // 尾部操作区
            HStack(spacing: 20) {
                Button("添加项") {
                    items.append("新项 \(items.count + 1)")
                }
                Button("删除项") {
                    if !items.isEmpty {
                        items.removeLast()
                    }
                }
            }
            .frame(height: footerHeight)
            .background(Color.gray.opacity(0.2))
            .padding(.horizontal)
        }
        .onPreferenceChange(ContentHeightPreferenceKey.self) { newHeight in
            contentHeight = newHeight
            adjustPopoverHeight()
        }
        .onAppear {
            adjustPopoverHeight()
        }
    }
    
    private func adjustPopoverHeight() {
        let totalHeight = contentHeight + headerHeight + footerHeight
        let targetHeight = min(totalHeight, maxPopoverHeight)
        
        // 适配不同场景下的弹窗实例获取
        if let popover = NSApp.currentEvent?.window?.popover {
            popover.contentSize = CGSize(width: popover.contentSize.width, height: targetHeight)
        } else {
            // 备选方案：遍历窗口查找弹窗
            for window in NSApplication.shared.windows {
                if let popover = window.popover {
                    popover.contentSize = CGSize(width: popover.contentSize.width, height: targetHeight)
                    break
                }
            }
        }
    }
}

// 主视图调用示例
struct MainView: View {
    @State private var showPopover = false
    @State private var items: [String] = ["初始项1", "初始项2"]
    
    var body: some View {
        Button("打开弹窗") {
            showPopover = true
        }
        .padding()
        .popover(isPresented: $showPopover) {
            PopoverContentView(items: $items)
                .frame(width: 320) // 固定弹窗宽度，按需调整
        }
    }
}

struct MainView_Previews: PreviewProvider {
    static var previews: some View {
        MainView()
    }
}

注意事项 #

• 如果List包含分组、自定义页眉页脚，需额外计算这些元素的高度并加入总高度计算
• 当List为空时，可设置默认最小高度避免弹窗过矮
• 若NSApp.currentEvent?.window?.popover无法获取弹窗实例，可通过遍历应用窗口的方式查找对应弹窗

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