iOS SwiftUI中如何显示无箭头的.popover()弹窗？

针对你的需求，这里提供两种可行的无箭头弹窗实现方案，适配你的场景：

方案一：通过 UIKit 桥接隐藏箭头 #

SwiftUI 原生 .popover() 在 iOS 下无法直接隐藏箭头，但可以通过包装 UIKit 的 UIPopoverPresentationController 实现无箭头效果，核心是设置 permittedArrowDirections 为 .none：

struct ArrowlessPopover<Content: View>: UIViewControllerRepresentable {
    @Binding var isPresented: Bool
    let content: Content
    
    func makeUIViewController(context: Context) -> UIHostingController<Content> {
        let hostingController = UIHostingController(rootView: content)
        hostingController.modalPresentationStyle = .popover
        hostingController.popoverPresentationController?.permittedArrowDirections = .none
        hostingController.popoverPresentationController?.sourceView = context.coordinator.sourceView
        return hostingController
    }
    
    func updateUIViewController(_ uiViewController: UIHostingController<Content>, context: Context) {
        if isPresented, !uiViewController.isBeingPresented {
            uiViewController.presentingViewController?.present(uiViewController, animated: true)
        } else if !isPresented, uiViewController.presentingViewController != nil {
            uiViewController.dismiss(animated: true)
        }
        uiViewController.popoverPresentationController?.permittedArrowDirections = .none
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(parent: self)
    }
    
    class Coordinator: NSObject {
        let parent: ArrowlessPopover
        weak var sourceView: UIView?
        
        init(parent: ArrowlessPopover) {
            self.parent = parent
        }
    }
}

// 给 View 添加无箭头 Popover 扩展方法
extension View {
    func arrowlessPopover<Content: View>(isPresented: Binding<Bool>, @ViewBuilder content: () -> Content) -> some View {
        self.background(
            ArrowlessPopover(isPresented: isPresented, content: content())
                .onAppear {
                    guard let sourceView = UIApplication.shared.windows.first?.rootViewController?.view else { return }
                    if let coordinator = (self as? UIViewControllerRepresentable)?.makeCoordinator() as? ArrowlessPopover<Content>.Coordinator {
                        coordinator.sourceView = sourceView
                    }
                }
        )
    }
}

// 使用示例
struct ContentView: View {
    @State private var showPopover = false
    
    var body: some View {
        Button("打开无箭头弹窗") {
            showPopover = true
        }
        .arrowlessPopover(isPresented: $showPopover) {
            VStack(spacing: 12) {
                Label("收藏", systemImage: "star.fill")
                    .foregroundColor(.orange)
                Label("分享", systemImage: "square.and.arrow.up")
                    .foregroundColor(.blue)
                Label("删除", systemImage: "trash.fill")
                    .foregroundColor(.red)
            }
            .padding()
            .background(Color.white)
            .cornerRadius(10)
            .shadow(color: .black.opacity(0.2), radius: 8, x: 0, y: 2)
        }
    }
}

该方案保留原生 Popover 的交互逻辑，同时完全隐藏箭头，弹窗位置可通过 sourceView 调整。

方案二：完全自定义 SwiftUI 弹窗 #

若不想依赖 UIKit 桥接，可直接用 SwiftUI 组件自定义无箭头弹窗，样式和行为完全可控：

struct CustomArrowlessPopover<Content: View>: View {
    @Binding var isPresented: Bool
    let content: Content
    
    var body: some View {
        ZStack(alignment: .center) {
            if isPresented {
                // 半透明背景遮罩，点击关闭弹窗
                Color.black.opacity(0.3)
                    .ignoresSafeArea()
                    .onTapGesture {
                        isPresented = false
                    }
                    .transition(.opacity)
                
                // 自定义弹窗内容
                content
                    .background(Color.white)
                    .cornerRadius(12)
                    .shadow(radius: 10)
                    .transition(.scale.combined(with: .opacity))
            }
        }
        .animation(.easeInOut, value: isPresented)
    }
}

// 使用示例
struct ContentView: View {
    @State private var showCustomPopover = false
    
    var body: some View {
        Button("打开自定义弹窗") {
            showCustomPopover = true
        }
        .overlay(
            CustomArrowlessPopover(isPresented: $showCustomPopover) {
                VStack(spacing: 16) {
                    Label("选项 A", systemImage: "a.circle.fill")
                    Label("选项 B", systemImage: "b.circle.fill")
                    Label("选项 C", systemImage: "c.circle.fill")
                }
                .padding(20)
            }
        )
    }
}

此方案纯 SwiftUI 实现，无需桥接，弹窗的圆角、阴影、动画等均可按需自定义，触发方式也能自由设置。

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