SwiftUI中如何移除NavigationLink添加contextMenu时的模糊预览

问题原因 #

SwiftUI 为挂载了contextMenu的可交互元素默认会自动生成上下文预览，你将contextMenu直接挂载在NavigationLink整体上时，系统会自动抓取NavigationLink的目标视图生成模糊预览，就是你看到的异常效果。

解决方案 #

方案1：全系统版本兼容方案 #

将contextMenu修饰符从NavigationLink整体，移到其label闭包内的根视图上即可：

NavigationLink {
    Text("Item at \(item.timestamp!, formatter: itemFormatter)")
} label: {
    Text(item.timestamp!, formatter: itemFormatter)
        .padding()
        // contextMenu 移到 label 内部的视图上
        .contextMenu(
            ContextMenu {
                Button(action: {
                    print("")
                }) {
                    Label("Save", systemImage: "square.and.arrow.up")
                }
            }
        )
}


private let itemFormatter: DateFormatter = {
    let formatter = DateFormatter()
    formatter.dateStyle = .short
    formatter.timeStyle = .medium
    return formatter
}()

方案2：iOS 16+ 极简方案 #

如果你的项目最低适配为 iOS 16 及以上，可以直接使用contextMenu的新重载，显式指定预览为空视图，完全消除预览区域：

NavigationLink {
    Text("Item at \(item.timestamp!, formatter: itemFormatter)")
} label: {
    Text(item.timestamp!, formatter: itemFormatter)
        .padding()
}
.contextMenu {
    Button(action: {
        print("")
    }) {
        Label("Save", systemImage: "square.and.arrow.up")
    }
} preview: {
    // 显式设置预览为空视图，不会生成任何预览内容
    EmptyView()
}


private let itemFormatter: DateFormatter = {
    let formatter = DateFormatter()
    formatter.dateStyle = .short
    formatter.timeStyle = .medium
    return formatter
}()

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