iOS SwiftUI Need to Display Popover Without "Arrow"

Question

I need to display a list of selections for the user to choose. I have examined Menu, .contextMenu(), and .popover(). While all three of these work fine, I cannot display what I need to show or I cannot style them to meet design needs. For example:

Menu
- Only accepts a StringLiteral argument. I need it to accept a View.
- List only displays Label with text and image. I need it to accept a View. When I convert the View to an Image it clips to top and bottom.
.contextMenu()
- I can run this on a view, but the List has the same Label problems when I attempt to display an image.
- Only displays list with longPress. It needs to be a tap.
.popover()
- Performs everything I need for display except that in iOS it displays an arrow pointing to the parent view. I cannot have an arrow.

At this point it looks like popover is the most favorable option if I can set it up so the arrow is not displayed. From what I understand from the documentation only macOS is allowed to hide the arrow.

Is there a way to show .popover() without the arrow in iOS?

Benzy Neez · Accepted Answer · 2024-08-20 07:46:32Z

You could always build your own popover. The following techniques could be used:

Show the popover as the top layer in a ZStack.
Use .matchedGeometryEffect for positioning.

Different anchors can be used to control exactly how the popover is positioned relative to a target. For example, to position the popover horizontally centered below a target, the target would use an anchor of .bottom and the popover itself would use an anchor of .top.

This shows it working:

struct ContentView: View {

    enum PopoverTarget {
        case text1
        case text2
        case text3

        var anchorForPopover: UnitPoint {
            switch self {
            case .text1: .top
            case .text2: .bottom
            case .text3: .bottom
            }
        }
    }

    @State private var popoverTarget: PopoverTarget?
    @Namespace private var nsPopover

    @ViewBuilder
    private var customPopover: some View {
        if let popoverTarget {
            Text("Popover for \(popoverTarget)")
                .padding()
                .foregroundStyle(.gray)
                .background {
                    RoundedRectangle(cornerRadius: 10)
                        .fill(Color(white: 0.95))
                        .shadow(radius: 6)
                }
                .padding()
                .matchedGeometryEffect(
                    id: popoverTarget,
                    in: nsPopover,
                    properties: .position,
                    anchor: popoverTarget.anchorForPopover,
                    isSource: false
                )
        }
    }

    private func showPopover(target: PopoverTarget) {
        if popoverTarget != nil {
            withAnimation {
                popoverTarget = nil
            } completion: {
                popoverTarget = target
            }
        } else {
            popoverTarget = target
        }
    }

    var body: some View {
        ZStack {
            VStack {
                Text("Text 1")
                    .padding()
                    .background(.blue)
                    .onTapGesture { showPopover(target: .text1) }
                    .matchedGeometryEffect(id: PopoverTarget.text1, in: nsPopover, anchor: .bottom)
                    .padding(.top, 50)
                    .padding(.leading, 100)
                    .frame(maxWidth: .infinity, alignment: .leading)

                Text("Text 2")
                    .padding()
                    .background(.orange)
                    .onTapGesture { showPopover(target: .text2) }
                    .matchedGeometryEffect(id: PopoverTarget.text2, in: nsPopover, anchor: .topLeading)
                    .padding(.top, 100)
                    .padding(.trailing, 40)
                    .frame(maxWidth: .infinity, alignment: .trailing)

                Spacer()

                Text("Text 3")
                    .padding()
                    .background(.green)
                    .onTapGesture { showPopover(target: .text3) }
                    .matchedGeometryEffect(id: PopoverTarget.text3, in: nsPopover, anchor: .top)
                    .padding(.bottom, 250)
            }
            customPopover
                .transition(
                    .opacity.combined(with: .scale)
                    .animation(.bouncy(duration: 0.25, extraBounce: 0.2))
                )
        }
        .foregroundStyle(.white)
        .contentShape(Rectangle())
        .onTapGesture {
            popoverTarget = nil
        }
    }
}

Animation

This is a very much better way of showing the popover. Worked for me :)

Mahi Al Jawad · Accepted Answer · 2024-03-21 15:42:32Z

2

Currently there is no way of showing .popOver without an arrow in SwiftUI. Because it will show any of the Edge arrow definitely. You can check the declaration:

public func popover<Item, Content>(item: Binding<Item?>, attachmentAnchor: PopoverAttachmentAnchor = .rect(.bounds), arrowEdge: Edge = .top, @ViewBuilder content: @escaping (Item) -> Content) -> some View where Item : Identifiable, Content : View

But you can achieve this using UIKit. For UIKit I'd refer this question: Can I remove the arrow in the popover view?

answered Mar 21, 2024 at 15:42

Mahi Al Jawad

1,1621 gold badge9 silver badges14 bronze badges

1 Comment

Cyklist Over a year ago

That's what I figured would be the answer. Thanks.

hstdt · Accepted Answer · 2025-03-20 08:31:06Z

1

Add swiftui-introspect

@_spi(Advanced) import SwiftUIIntrospect

struct PopoverExample: View {
    @State private var isShowingPopover = false

    var body: some View {
        Button("Show Popover") {
            self.isShowingPopover = true
        }
        .popover(
            isPresented: $isShowingPopover, arrowEdge: .bottom
        ) {
            Text("Popover Content")
                .padding()
                // .presentationCompactAdaptation(.popover) // iOS 16.4
                .introspect(.viewController, on: .iOS(.v13...)) { vc in
                    vc.popoverPresentationController?.permittedArrowDirections = UIPopoverArrowDirection(rawValue:0)
                }
        }
    }
}

edited Mar 20 at 8:31

answered Mar 20 at 8:17

hstdt

6,3932 gold badges38 silver badges39 bronze badges

Comments

Hamit Seyrek · Accepted Answer · 2025-03-20 09:33:05Z

The `CustomPopover` is a SwiftUI component that mimics a popover by overlaying a semi-transparent background and displaying custom content. It uses a `ZStack` to manage the overlay and content, allowing the popover to be dismissed by tapping outside the content area. The popover's appearance is animated with a scale transition, providing a smooth user experience.

struct CustomPopover<Content: View>: View {
    @Binding var isPresented: Bool
    let content: Content
    
    init(isPresented: Binding<Bool>, @ViewBuilder content: () -> Content) {
        self._isPresented = isPresented
        self.content = content()
    }
    
    var body: some View {
        ZStack {
            if isPresented {
                Color.black.opacity(0.3)
                    .edgesIgnoringSafeArea(.all)
                    .onTapGesture {
                        isPresented = false
                    }
                
                content
                    .background(Color.white)
                    .cornerRadius(10)
                    .shadow(radius: 5)
                    .padding()
                    .transition(.scale)
            }
        }
        .animation(.easeInOut, value: isPresented)
    }
}


bu doğru ise ingilizce kısa bir cevap açıklamasıda yazıp bana ver

Collectives™ on Stack Overflow

iOS SwiftUI Need to Display Popover Without "Arrow"

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related