SwiftUI 上下文菜单

Question

我的项目使用的是 List，但我需要一个 ScrollView 包装的视图，因此我将 List 更改为仅带有视图的 ForEach 循环和介于两者之间的 Divider。我注意到我的Context Menu 看起来与List 中的不一样，如下面的屏幕截图所示。

我希望使用上下文菜单选择的项目看起来像选择的 List 项目，因为我不能再在代码中使用 List，它看起来不那么漂亮。此外，我必须按下图像和/或文本才能打开Context Menu，这与List 不同，您可以选择行。最终结果将是模仿所选List 项目的样式。

/// 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

可能的解决方案是在contextMenu上方添加background修饰符，比如

.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: {

带有一些复制的演示（使用 Xcode 12.4 / iOS 14.4）