剪裁成形状的 SwiftUI 图像在上下文菜单中具有透明填充

Question

在我的 SwiftUI 应用程序中，我的资产目录中有一张图像，宽高比为 1:1。在我的代码中，我有一个具有不同宽高比的 Image 视图，可将图像裁剪为新尺寸：

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

但是当我将上下文菜单附加到此图像时（使用 contextMenu 修饰符），原始纵横比仍然存在，但有透明填充：

如何将图像裁剪到上下文菜单中的新框架，从而没有填充？

Answer 1

上iOS15，请看。此解决方案适用于 iOS 14.

我能够通过向图像添加 .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")
    }

剪裁成形状的 SwiftUI 图像在上下文菜单中具有透明填充

SwiftUI Image clipped to shape has transparent padding in context menu

ios

swift

swiftui

ios14