LazyVGrid中Context Menu触发对应错误项问题排查求助

问题描述 #

我遇到了Context Menu响应位置异常的问题，右键菜单会弹出对应错误的列表项。以下是创建该列表的Swift代码片段：

LazyVGrid实现代码 #

ScrollView {
    LazyVGrid(columns: columns, alignment: .leading, spacing: 8) {
        ForEach(viewModel.previews) { item in
            PreviewCard(item: item)
                .contextMenu(
                    ContextMenu(menuItems: {
                        Text("Menu Item 1 \(item.size)")
                    }))
                .cornerRadius(7)
                .shadow(radius: 3)
                .padding(3)
        }
    }
}

PreviewCard视图代码 #

struct PreviewCard: View {
    private let item: PreviewPayload
    
    init(item: PreviewPayload) {
        self.item = item
    }
    
    var body: some View {
        ZStack(alignment: .bottomLeading) {
            AsyncImage(url: item.preview) { image in
                image
                    .resizable()
                    .scaledToFill()
                
            } placeholder: {
                ProgressView()
            }
            .frame(width: 100, height: 200)
            
            VStack(alignment: .leading, spacing: 4) {
                Text(TextFormatter.formatSize(item.size))
                
                if let date = TextFormatter.formatDate(item.createdDate) {
                    Text(date)
                }
            }
            .padding()
        }
    }
}

问题演示 #

请问该问题是否与LazyVGrid的特性有关，或是我在实现过程中遗漏了什么关键内容？

问题原因与解决方案 #

这个问题确实和LazyVGrid的懒加载复用特性直接相关。LazyVGrid会复用已创建的视图单元格来渲染新进入视野的内容，当Context Menu直接绑定在复用的视图上时，可能会因为视图复用导致菜单内容没有正确更新到当前对应的item数据。

方案1：将Context Menu嵌入PreviewCard内部 #

把Context Menu的定义移到PreviewCard的body中，让菜单直接和内部的item绑定，确保每个单元格的菜单都对应自己的数据：

修改后的PreviewCard代码：

struct PreviewCard: View {
    private let item: PreviewPayload
    
    init(item: PreviewPayload) {
        self.item = item
    }
    
    var body: some View {
        ZStack(alignment: .bottomLeading) {
            AsyncImage(url: item.preview) { image in
                image
                    .resizable()
                    .scaledToFill()
            } placeholder: {
                ProgressView()
            }
            .frame(width: 100, height: 200)
            
            VStack(alignment: .leading, spacing: 4) {
                Text(TextFormatter.formatSize(item.size))
                if let date = TextFormatter.formatDate(item.createdDate) {
                    Text(date)
                }
            }
            .padding()
        }
        .contextMenu {
            Text("Menu Item 1 \(item.size)")
        }
        .cornerRadius(7)
        .shadow(radius: 3)
        .padding(3)
    }
}

对应的LazyVGrid代码简化为：

ScrollView {
    LazyVGrid(columns: columns, alignment: .leading, spacing: 8) {
        ForEach(viewModel.previews) { item in
            PreviewCard(item: item)
        }
    }
}

方案2：添加唯一标识避免视图复用混淆 #

如果不想调整视图结构，可以给每个PreviewCard添加唯一的id，让SwiftUI识别每个单元格是独立的，避免复用导致的菜单绑定错误：

ScrollView {
    LazyVGrid(columns: columns, alignment: .leading, spacing: 8) {
        ForEach(viewModel.previews) { item in
            PreviewCard(item: item)
                .contextMenu {
                    Text("Menu Item 1 \(item.size)")
                }
                .cornerRadius(7)
                .shadow(radius: 3)
                .padding(3)
                .id(item) // 添加唯一标识，确保视图与数据一一对应
        }
    }
}

注意：此方案要求PreviewPayload遵循Identifiable协议，且id属性具有唯一性。

原理说明 #

LazyVGrid的懒加载复用机制是为了优化性能、减少内存占用，但当视图绑定了依赖动态数据的内容（如Context Menu）时，复用可能导致旧数据未被及时替换。通过将菜单与单元格视图绑定，或给视图添加唯一标识，能让SwiftUI正确关联每个视图和对应的数据，解决菜单内容与单元格不匹配的问题。

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