SwiftUI - 显示 contextMenu 时，NavigationLink 的内容不可读

Question

I have a coloured NavigationLink that has context-menu. Its content is not readable when the context-menu is presened. I have epxreminted using the context-menu on the immediate sub-view of the NavigationLink , but it is stil the same issue.

NavigationLink(destination: Text("View")) {
    VStack(alignment: .leading) {
        Text("Context Menu")

            .font(.system(size: 24, weight: .bold))
    }
    .frame(minWidth: 0, maxWidth: .infinity, idealHeight: 70)
    .foregroundColor(.white)
    .padding()
    .cornerRadius(3.0)
}
.background(Color.red)
.contextMenu {
    Section {
        Button(action: {
        }) {
            Label("Edit", systemImage: "square.and.pencil")
        }
    }
    
    Section(header: Text("Secondary actions")) {
        Button(action: {}) {
            Label("Delete", systemImage: "trash")
        }
    }
}

NavigatoinLinks look like in its original state.

When the context-menu is presented. The problem is even worse If I use small sized text.

I have tested on ios 14.2 both on simulator and physical device.

---

Info

Hierarchy of views.

ScrollView {
  LazyVStack {
      ForEach(data) { item in
        // NavigationLink
      }
  }
}

---

Update

This is a similar project that has the same issue.

struct ContentView: View {
    var body: some View {
        NavigationView {
            ScrollView {
                LazyVStack {
                    ForEach(0..<10) { item in
                        NavigationLink(destination: Text("View")) {
                            VStack(alignment: .leading) {
                                Text("Context Menu")
                                    .font(.system(size: 24, weight: .bold))
                            }
                            .frame(minWidth: 0, maxWidth: .infinity, idealHeight: 70)
                            .foregroundColor(.white)
                            .padding()
                            .cornerRadius(3.0)
                        }
                        .background(Color.red)
                        .contextMenu {
                            Section {
                                Button(action: {
                                }) {
                                    Label("Edit", systemImage: "square.and.pencil")
                                }
                            }
                            
                            Section(header: Text("Secondary actions")) {
                                Button(action: {}) {
                                    Label("Delete", systemImage: "trash")
                                }
                            }
                        }
                        
                    }
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Answer 1

I know it's been two years, but this still remains an issue with iOS 16 when you use LazyVStack. In contrast with List, SwiftUI generates a clear automatic preview. What's new with iOS 16 is that you can now define a custom preview, and SwiftUI will present that preview without the blur. If you choose to use LazyVStack for performance or another reason, this gives you an alternative, albeit with duplicate code.

From your example above, you would add:

NavigationLink(destination: Text("View")) {
    // View such as your VStack containing Text
}
.contextMenu {
    // Menu items
} preview: {
    // View, again, but you might want to simplify or modify 
}