SwiftUI圆角视图ContextMenu显示异常问题求助

问题原因 #

SwiftUI渲染ContextMenu目标视图快照时，会默认添加高亮边框；同时若视图阴影修饰符层级不合理，会导致文字带上多余阴影效果。

具体解决步骤 #

1. 移除胶囊状高亮边框
   给TravelView添加PlainButtonStyle()禁用默认交互高亮样式，同时设置contentShape让交互区域匹配视图圆角，避免系统生成额外边框：

TravelView(travel: travel)
    .buttonStyle(PlainButtonStyle())
    .contentShape(RoundedRectangle(cornerRadius: 20))
    .contextMenu {
        VStack {
            Button(action: {}) {
                Label("Edit", systemImage: "pencil")
            }
        }
    }

2. 移除字体上的阴影
   调整TravelView内部修饰符顺序，用compositingGroup()将视图和背景合并为单个图层，确保阴影只作用于整体而非子视图：

VStack{
    // 你的内容代码
}
.background(Color.green.opacity(0.8))
.cornerRadius(20)
.compositingGroup()
.shadow(color: .black.opacity(0.5), radius: 5, x: 0, y: 2)

补充说明 #

compositingGroup()会把背景和视图内容合并成统一图层，阴影仅应用在这个整体图层上，不会渗透到文字元素；contentShape则明确了视图的交互区域形状，避免系统用默认胶囊形作为ContextMenu的触发区域。

内容的提问来源于stack exchange，提问作者Oleg