Home > Mobile >  SwiftUI Popover background with Material
SwiftUI Popover background with Material

Time:01-03

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)
                        }

CodePudding user response:

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.

  • Related