SwiftUI Popover Made Simple: Step-by-Step Guide

SwiftUI is a powerful framework for building user interfaces across all Apple platforms. One of its standout features is the SwiftUI popover, which provides an elegant way to present contextual information.

This blog will guide you through creating and customizing popovers in SwiftUI, optimizing your app's user experience.

What is a SwiftUI Popover?

In SwiftUI, a popover is a transient view that appears over the current context to display additional information or actions without navigating away from the main screen. It’s a versatile alternative to action sheets and modal views, often used in place of full-screen presentations for contextual content. When a popover appears, it anchors to a specific view or anchor point, ensuring a seamless user experience.

Advantages of Using SwiftUI Popovers

Popovers are particularly useful in the following scenarios:

• When you need to show supplementary content without disrupting the current context.

• When actions or details are contextual to a specific screen element.

• To provide a lightweight alternative to full modal presentations.

Creating a Basic SwiftUI Popover

Here’s a simple example to illustrate how to create a SwiftUI popover. When the user taps a button, a popover view is displayed.

1struct PopoverExampleView: View {
2    @State private var showPopover = false // State variable to manage popover visibility
3
4    var body: some View {
5        VStack {
6            Button("Show Popover") {
7                showPopover.toggle() // Toggles the popover state
8            }
9            .popover(isPresented: $showPopover) { // Popover modifier
10                Text("This is a SwiftUI Popover!")
11                    .padding() // Adds padding around the text
12            }
13        }
14    }
15}

​

In this example, the popover is toggled with a button press, and the popover view content is defined as a Text element.

Customizing Popover Style and Position

You can customize the popover style and position to fit your app's design needs. While popovers are dynamic, ensuring proper use of screen space and an appropriate popover anchor is crucial.

Example: Using a Popover Anchor

1struct CustomPopoverView: View {
2    @State private var showPopover = false
3
4    var body: some View {
5        VStack {
6            Button("Show Custom Popover") {
7                showPopover.toggle()
8            }
9            .popover(isPresented: $showPopover, attachmentAnchor: .rect(.bounds), arrowEdge: .top) {
10                Text("Custom Popover Content")
11                    .frame(width: 200, height: 100)
12            }
13        }
14    }
15}

​

In this example, .rect(.bounds) specifies the anchor rectangle as the entire bounds of the button, and .top ensures the arrow points upwards from the triggering button.

Integrating Buttons and Dismiss Actions

To make a popover interactive, you can include buttons for actions like "Submit" or cancel. Here’s how to include a cancel button in a popover:

1struct InteractivePopoverView: View {
2    @State private var showPopover = false
3
4    var body: some View {
5        VStack {
6            Button("Show Interactive Popover") {
7                showPopover.toggle()
8            }
9            .popover(isPresented: $showPopover) {
10                VStack {
11                    Text("Are you sure?")
12                        .font(.title)
13                        .padding()
14
15                    HStack {
16                        Button("Cancel") {
17                            showPopover = false
18                        }
19                        .padding()
20
21                        Button("Confirm") {
22                            // Perform action
23                            showPopover = false
24                        }
25                        .padding()
26                    }
27                }
28            }
29        }
30    }
31}

​

The cancel button and the confirm button provide options for the user, enhancing the interactivity of the popover.

Managing Multiple Popovers and Modal Presentations

It’s important to gracefully handle existing popovers. When presenting a new popover, ensure any existing popover is dismissed to avoid overlapping presentations, as SwiftUI does not automatically handle this scenario. SwiftUI helps manage this with state bindings.

Example: Dismissing an Existing Popover

1struct MultiPopoverView: View {
2    @State private var showPopover1 = false
3    @State private var showPopover2 = false
4
5    var body: some View {
6        VStack {
7            Button("Show First Popover") {
8                showPopover1.toggle()
9                if showPopover2 { showPopover2 = false }
10            }
11            .popover(isPresented: $showPopover1) {
12                Text("First Popover")
13            }
14
15            Button("Show Second Popover") {
16                showPopover2.toggle()
17                if showPopover1 { showPopover1 = false }
18            }
19            .popover(isPresented: $showPopover2) {
20                Text("Second Popover")
21            }
22        }
23    }
24}

​

Using View Modifiers for Reusability

Creating reusable view modifiers can streamline your popover implementation. For instance:

1struct PopoverModifier: ViewModifier {
2    @Binding var isPresented: Bool
3    let content: () -> AnyView
4
5    func body(content: Content) -> some View {
6        content.popover(isPresented: $isPresented) {
7            self.content()
8        }
9    }
10}

​

Example usage:

1struct ContentView: View {
2    @State private var showPopover = false
3
4    var body: some View {
5        Button("Show Popover") {
6            showPopover.toggle()
7        }
8        .modifier(PopoverModifier(isPresented: $showPopover) {
9            AnyView(Text("Reusable Popover Content").padding())
10        })
11    }
12}

​

Final Thoughts!

Mastering the SwiftUI popover can significantly enhance the usability and functionality of your app. By carefully configuring popovers, handling existing popovers, and integrating interactive elements like a cancel button, you can create an intuitive user experience. Always tailor your design to the current context when presenting content with popovers, action sheets, or alerts. Explore the power of SwiftUI popover to build sophisticated interfaces that resonate with users.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.