CODEWITHSUNDEEP
iosswiftswiftuipopover
Akshay
Akshay

Reputation: 33

SwiftUI Popover background with Material

I'm trying to create a SwiftUI Popover with a translucent material(regular, thin, or ultra-thin) background. To show up some vibrancy of the content behind the Popover content.

I tried adding ultraThin and other material types to the background view. they don't have any effect on the popover background. Also tried creating a UIViewRepresentable by creating a visual effect view. Still, there's no effect on the popover background.

   .popover(isPresented: $showPopover) {
                            ZStack {
                                Text("My popover content")
                                    .font(.title)
                            }
                            .frame(width: 250, height: 350, alignment: .center)
                            .background(.ultraThinMaterial)
                        }

Upvotes: 3

Views: 1425

Answers (1)

bpisano
bpisano

Reputation: 560

iOS 16.4+

iOS 16.4 introduced a new .presentationBackground() modifier that can be used to set a background material to a popover or a modal presented view. Just pass the material you want to use as a parameter.

.popover(isPresented: $showPopover) {
    Text("Hello, World!")
        .presentationBackground(.regularMaterial)
}

Make sure to use the presentationBakcground() modifier inside the .sheet() or .popover() closure. More documentation here.

Older versions

Popovers are by default translucent on iPadOS and macOS. On iOS, popovers are presented in the form of a modal view.

The .background(.ultraThinMaterial) is applied directly on your ZStack view but not on the popover/modal view itself. Using UIViewRepresentable or UIViewControllerRepresentable will only wrap your UIView/UIViewController inside a View and will still have no effect on the popover/modal.

At that time (SwiftUI 4, Xcode 14.2), it is not possible to change the background material of a popover/modal view using SwiftUI.

Upvotes: 6

Related Questions