macOS中NSViewRepresentable内PDFView与PDFThumbnailView不重叠布局问询

你的核心问题在于把缩略图视图直接作为PDFView的子视图，且约束方向错误，导致两者空间重叠。下面是修正后的实现方案：

核心改动思路 #

1. 用一个容器NSView作为根视图，将PDFView和缩略图视图都放在容器内，避免层级嵌套导致的重叠。
2. 通过约束明确划分两者的空间：PDFView占据容器左侧所有可用空间，缩略图固定在右侧。
3. 修正约束方向，确保缩略图位于PDFView右侧而非左侧。

完整修正代码 #

struct PDFViewWrapper: NSViewRepresentable {
    @Binding var pdfDisplay: Int
    
    func makeNSView(context: Context) -> NSView {
        // 1. 创建容器视图作为根视图
        let containerView = NSView()
        containerView.translatesAutoresizingMaskIntoConstraints = false
        
        // 2. 初始化PDFView并添加到容器
        let pdfView = PDFView()
        pdfView.translatesAutoresizingMaskIntoConstraints = false
        containerView.addSubview(pdfView)
        
        // 3. 初始化缩略图视图并添加到容器
        let thumbnailView = PDFThumbnailView()
        thumbnailView.translatesAutoresizingMaskIntoConstraints = false
        containerView.addSubview(thumbnailView)
        thumbnailView.pdfView = pdfView // 关联PDFView
        
        // 4. 设置约束，划分空间
        NSLayoutConstraint.activate([
            // PDFView：左、上、下贴容器，右边缘贴缩略图左边缘
            pdfView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
            pdfView.topAnchor.constraint(equalTo: containerView.topAnchor),
            pdfView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor),
            pdfView.trailingAnchor.constraint(equalTo: thumbnailView.leadingAnchor),
            
            // 缩略图：右、上、下贴容器，固定宽度80
            thumbnailView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
            thumbnailView.topAnchor.constraint(equalTo: containerView.topAnchor),
            thumbnailView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor),
            thumbnailView.widthAnchor.constraint(equalToConstant: 80),
            
            // 可选：防止缩略图被过度压缩
            thumbnailView.widthAnchor.constraint(greaterThanOrEqualToConstant: 60)
        ])
        
        // 5. 配置PDF内容和显示参数
        let fileURL = FileManagerClient.shared.getDocumentsDirectory().appendingPathComponent("example.PDF")
        if let pdfDocument = PDFDocument(url: fileURL) {
            pdfView.document = pdfDocument
        }
        pdfView.autoScales = true
        pdfView.displayMode = PDFDisplayMode(rawValue: pdfDisplay) ?? .singlePageContinuous
        
        // 6. 适配缩略图尺寸（匹配视图宽度）
        thumbnailView.thumbnailSize = CGSize(width: 70, height: 90)
        thumbnailView.backgroundColor = .placeholderTextColor
        
        return containerView
    }
    
    func updateNSView(_ nsView: NSView, context: Context) {
        // 更新PDF显示模式：从容器中找到PDFView
        guard let pdfView = nsView.subviews.first(where: { $0 is PDFView }) as? PDFView else { return }
        pdfView.displayMode = PDFDisplayMode(rawValue: pdfDisplay) ?? .singlePageContinuous
    }
}

关键细节说明 #

• 容器视图作为根视图，确保两个子视图在同一层级，空间划分清晰。
• 约束通过pdfView.trailingAnchor.constraint(equalTo: thumbnailView.leadingAnchor)让两个视图紧密衔接，无重叠。
• 缩略图尺寸设置为略小于视图宽度（70<80），避免内容被截断。

内容的提问来源于stack exchange，提问作者Атанас Начков