SwiftUI中如何复刻表情反应弹窗与上下文菜单？

核心结论 #

SwiftUI 没有内置的、类似.contextMenu那样直接实现视图上方弹出表情反应弹窗的便捷API，需要自定义实现，但可以借助现有组件降低复杂度，不用完全从零构建复杂方案。

可行实现思路 #

1. 利用Popover自定义位置（iOS 16+） #

Popover默认从视图边缘弹出，但可通过锚点和箭头方向调整，实现上方弹出效果：

struct ReactionPopover: View {
    @Binding var isPresented: Bool
    let reactions: [String] = ["😂", "👍", "❤️", "😮", "😢", "😠"]
    
    var body: some View {
        HStack(spacing: 12) {
            ForEach(reactions, id: \.self) { reaction in
                Button(action: {
                    print("Selected reaction: \(reaction)")
                    isPresented = false
                }) {
                    Text(reaction)
                        .font(.system(size: 32))
                }
            }
        }
        .padding(8)
        .background(.ultraThinMaterial)
        .cornerRadius(16)
        .shadow(radius: 4)
    }
}

// 使用示例
struct ContentView: View {
    @State private var showReactions = false
    
    var body: some View {
        Text("Hello, World!")
            .onTapGesture {
                showReactions.toggle()
            }
            .popover(isPresented: $showReactions, attachmentAnchor: .point(.top), arrowEdge: .bottom) {
                ReactionPopover(isPresented: $showReactions)
            }
    }
}

通过attachmentAnchor: .point(.top)将弹窗锚定在视图顶部，arrowEdge: .bottom让箭头指向原视图，直接实现上方弹出效果，系统原生组件会自动适配设备和屏幕方向。

2. 自定义弹窗容器+动画（兼容iOS 16以下） #

如果需要适配低版本系统，可通过ZStack叠加自定义弹窗，结合坐标计算实现位置控制：

struct ReactionOverlay: View {
    @Binding var isVisible: Bool
    let targetFrame: CGRect
    let reactions: [String] = ["😂", "👍", "❤️", "😮", "😢", "😠"]
    
    var body: some View {
        ZStack {
            if isVisible {
                // 点击外部收起弹窗
                Color.black.opacity(0.001)
                    .onTapGesture {
                        isVisible = false
                    }
                
                HStack(spacing: 12) {
                    ForEach(reactions, id: \.self) { reaction in
                        Button(action: {
                            print("Selected reaction: \(reaction)")
                            isVisible = false
                        }) {
                            Text(reaction)
                                .font(.system(size: 32))
                        }
                    }
                }
                .padding(8)
                .background(.ultraThinMaterial)
                .cornerRadius(16)
                .shadow(radius: 4)
                // 手动计算目标视图上方的位置
                .position(x: targetFrame.midX, y: targetFrame.minY - 60)
                .transition(.scale.combined(with: .opacity))
            }
        }
        .ignoresSafeArea()
    }
}

// 使用示例
struct ContentView: View {
    @State private var showReactions = false
    @State private var targetFrame = CGRect.zero
    
    var body: some View {
        ZStack {
            Text("Hello, World!")
                .background(
                    // 获取目标视图的全局坐标
                    GeometryReader { proxy in
                        Color.clear.onAppear {
                            targetFrame = proxy.frame(in: .global)
                        }
                    }
                )
                .onLongPressGesture {
                    showReactions.toggle()
                }
            
            ReactionOverlay(isVisible: $showReactions, targetFrame: targetFrame)
        }
        .animation(.easeInOut, value: showReactions)
    }
}

通过GeometryReader获取目标视图的全局坐标，手动计算弹窗的上方位置，配合过渡动画实现流畅的弹出/收起效果。

实践优化点 #

• 给表情按钮添加交互反馈，比如点击时的缩放动画，提升体验：

@State private var isPressed = false

Button(action: {
    // 处理表情选中逻辑
}) {
    Text(reaction)
        .font(.system(size: 32))
}
.scaleEffect(isPressed ? 0.9 : 1.0)
.simultaneousGesture(
    DragGesture(minimumDistance: 0)
        .onChanged { _ in isPressed = true }
        .onEnded { _ in isPressed = false }
)

• 自定义弹窗时，注意处理键盘弹出时的位置偏移，避免被键盘遮挡。

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