SwiftUI 裁剪為形狀的圖像在上下文菜單中具有透明填充

Question

在我的 SwiftUI 應用程序中，我的資產目錄中有一張寬高比為 1:1 的圖像。 在我的代碼中，我有一個具有不同縱橫比的Image視圖，可將圖像剪輯為新大小：

Image("My Image")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 300, height: 250)
    .clipped()

但是當我將上下文菜單附加到此圖像（使用contextMenu修飾符）時，原始縱橫比仍然存在，但具有透明填充：

如何將圖像剪輯到上下文菜單內的新框架中，因此沒有填充？

Answer 1

我可以通過向圖像添加.contentShape(Rectangle())修飾符來解決這個問題：

Image("My Image")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 300, height: 250)
    .clipped()
    .contentShape(Rectangle())
    .contextMenu {
        Text("Menu Item")
    }

Answer 2

我相信適用於所有場景的正確解決方案是在 contentShape 中設置第一個參數（種類）：

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

將其設置為 .contextMenuPreview ，這將適用於所有形狀：

Image("leaf")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 300, height: 300)
    .clipShape(Circle())
    .contentShape(ContentShapeKinds.contextMenuPreview, Circle())
    .contextMenu {
        Text("Menu Item")
    }