SwiftUI .contextMenu 使用 clipShape 在我的視圖周圍有可見的填充

Question

我在聊天氣泡中有一張圖片。 這種效果是通過將 clipShape 用於氣泡的自定義形狀來實現的。

當我附加一個 .contextMenu 並呈現 contextMenu 時，它會在聊天氣泡周圍顯示一個填充。 此外，contextMenu 的默認cornerRadius 會剪輯聊天氣泡提示的一小部分。

我想要實現的是我可以在 Apple Messages 應用程序中看到的內容。 在帶有文本的消息上顯示 contextMenu 會保留文本的 clipShape 而不添加填充。 在圖像上，它會刪除 clipShape 並將圖像調整為適當的縱橫比。 這兩個我都無法實現。

struct ContentView: View {
    var body: some View {
        VStack {
            Image("leaf")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: 264, height: 361)
                .clipShape(Bubble(location: .rightBottom))
                .contentShape(Bubble(location: .rightBottom))
                .contextMenu(ContextMenu(menuItems: {
                    Button {
                    } label: {
                        HStack {
                            Text("Save")
                            Image(systemName: "arrow.down.to.line")
                        }
                    }
                }))
        }
        
    }
}

我曾嘗試將 .contentShape 用於相同形狀的氣泡，但這根本沒有效果。 無論如何要在下面的屏幕截圖左側顯示沒有圓角和額外填充的上下文菜單？ 或者使 contextMenu 容器背景理想地清晰？

按上下文菜單之前的圖像：

Answer 1

解決方案非常簡單。 只需使用內容形狀的第一個參數類型：

func contentShape<S>(_ kind: ContentShapeKinds, _ shape: S)

並將 kind 設置為 .contextMenuPreview：

Image("leaf")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 264, height: 361)
    .clipShape(Bubble(location: .rightBottom))
    .contentShape(.contextMenuPreview, Bubble(location: .rightBottom))
    .contextMenu(ContextMenu(menuItems: {
        Button {
        } label: {
            HStack {
                Text("Save")
                Image(systemName: "arrow.down.to.line")
            }
        }
    }))