SwiftUI Context Menu

Question

My project was using a List but I needed a ScrollView wrapped view so I changed the List to just a ForEach loop with a view and Divider in between. I noticed my Context Menu doesn't look the same as when it was in the List as in the screenshot below.

I'd like the item selected with context menu to look like the List item selected since I can no longer use List in the code, it doesn't look as pretty. Also I have to press on the image and or text to open the Context Menu unlike in a List you can select the row. The end result would be to mimic the style of the selected List item.

/// Context Menu looks terrible
VStack (alignment: .leading, spacing: 0){
    ForEach(self.welcome.views.dropLast(), id: \.id) { view in
        ForEach(view.views ?? [], id: \.id) { purple in
            ForEach(purple.views, id: \.id) { fluffy in
                VStack (alignment: .leading, spacing: 0){
                    if viewClass == "FeaturedHeaderView" {
                        Text(title)
                            .font(.title3)
                            .fontWeight(.bold)
                    } else {
                        HStack (spacing: 15){
                            RequestImage(Url(image), animation: nil)
                                .aspectRatio(contentMode: .fit)
                                .frame(width: 60, height: 60)
                                .clipped()
                                .cornerRadius(13.5)
                            VStack (alignment: .leading){
                                Text(name)
                                    .font(.headline)
                                    .fontWeight(.bold)
                                Text(author)
                                    .foregroundColor(Color.secondary)
                                    .font(.footnote)
                                Text(repo)
                                    .foregroundColor(Color.secondary)
                                    .font(.caption)
                            }
                        }
                        .contextMenu(ContextMenu(menuItems: {
                            HStack {
                                Button(action: {
                                    openURL(URL(string: "URL")!)
                                }) {
                                    Label("Open in Safari", systemImage: "safari.fill")
                                }
                            }
                        }))
                    }
                }
                Divider()
            }
        }
    }
    .padding(.all, 5)
    .padding(.leading, 5)
}

/// List Context Menu looks great but can't use List in ScrollView
List {
    ForEach(self.welcome.views.dropLast(), id: \.id) { view in
        ForEach(view.views ?? [], id: \.id) { purple in
            ForEach(purple.views.dropLast(), id: \.id) { fluffy in
                VStack (alignment: .leading, spacing: 0){
                    if viewClass == "FeaturedHeaderView" {
                        Text(title)
                            .font(.title3)
                            .fontWeight(.bold)
                    } else {
                        HStack (spacing: 15){
                            RequestImage(Url(image), animation: nil)
                                .aspectRatio(contentMode: .fit)
                                .frame(width: 60, height: 60)
                                .clipped()
                                .cornerRadius(13.5)
                            VStack (alignment: .leading){
                                Text(name)
                                    .font(.headline)
                                    .fontWeight(.bold)
                                Text(author)
                                    .foregroundColor(Color.secondary)
                                    .font(.footnote)
                                Text(repo)
                                    .foregroundColor(Color.secondary)
                                    .font(.caption)
                            }
                        }
                        .contextMenu(ContextMenu(menuItems: {
                            HStack {
                                Button(action: {
                                    openURL(URL(string: "URL")!)
                                }) {
                                    Label("Open in Safari", systemImage: "safari.fill")
                                }
                            }
                        }))
                    }
                }
            }
        }
    }
    .padding(.all, 10)
    .listRowInsets(EdgeInsets())
}

Answer 1

The possible solution is to add background modifier above contextMenu, like

.frame(maxWidth: .infinity)           // << to make it screen-wide
.background(
    RoundedRectangle(cornerRadius: 12)  // << tune as needed
       .fill(Color(UIColor.systemBackground))  // << fill with system color
)
.contextMenu(ContextMenu(menuItems: {

Demo with some replication (used Xcode 12.4 / iOS 14.4)