SwiftUI .contextMenu 使用 clipShape 在我的视图周围有可见的填充答案

【问题标题】：SwiftUI .contextMenu has visible padding around my View with a clipShapeSwiftUI .contextMenu 使用 clipShape 在我的视图周围有可见的填充
【发布时间】：2021-12-26 01:32:28
【问题描述】：

我在聊天气泡中有一张图片。这种效果是通过使用 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？还是让 contextMenu 容器的背景理想清晰？

按下上下文菜单之前的图像：

【问题讨论】：

标签： ios xcode swiftui swiftui-contextmenu

【解决方案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")
            }
        }
    }))

【讨论】：