SwiftUI中如何调整ContextMenu仅高亮PagedCarousel内的卡片？

核心解决方案：将ContextMenu附加到单张卡片内部 #

问题根源是你把contextMenu直接绑定在了整个PagedCarousel组件上，导致高亮区域覆盖了轮播的所有元素（包括分页指示器）。正确的做法是把contextMenu移到每张卡片的内容闭包中，让长按/右键的触发范围只限定在单张卡片上。

修改后的代码示例 #

if recentOrders.count > 1 {
    PagedCarousel(items: recentOrdersByRegion,
                   carouselType: .nonLazy,
                   useFixedHeight: false,
                   autoVerticalPadding: false,
                   includePageIndicator: true,
                   pageIndicatorCurrentElementLabelPath: 
                   carouselLabel: localize(.recent).uppercased(),
                   parentSize: geometry.size,
                   content: { (order: Order) in
                       // 这里是你的卡片内容容器，比如VStack/HStack包裹的卡片视图
                       VStack {
                           // 卡片内部的订单信息、UI元素
                           Text(order.orderNumber)
                           // ...其他卡片内容
                       }
                       // 将contextMenu直接附加到当前卡片视图上
                       .contextMenu {
                           Button(role: .destructive, action: {
                               dependencies.interactors.order.removeOrder(order)
                           }, label: {
                               Label("Remove", systemImage: "trash")
                           })
                       }
                   })
}

顺带解决“两个Remove按钮”的问题 #

你之前的contextMenu里用ForEach(recentOrder)遍历了所有订单，所以会显示对应数量的按钮。把菜单移到卡片内部后，每个菜单只对应当前卡片的订单，自然只会显示一个“Remove”按钮，刚好解决这个额外问题。

为什么之前的尝试无效？ #

• 移动contextMenu但未放到卡片内部：只要还是作用于整个PagedCarousel，高亮区域就会包含组件的所有子视图（包括分页指示器）
• 关闭分页指示器：这是治标不治本的方法，我们需要的是保留指示器但不让它被ContextMenu影响

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