SwiftUI popover background color

Question

With UIKit, I could customize the background color of a popover using UIPopoverPresentationController's backgroundColor.

This would change the color including the arrow.

How can I accomplish this with SwiftUI? When I change the the popover content's background color, it doesn't include the arrow:

user_4652564 · Answer

You can use .scaleEffect(…) to make your background view take more space. When it’s bigger than the content of the popover, it will fill the arrow.

struct ContentView: View {
    @State var popoverVisible = false

    var body: some View {
        VStack {
            Button("Open Popover") {
                self.popoverVisible = true
            }
            .popover(isPresented: $popoverVisible) {
                ZStack {
                    // Scaled-up background
                    Color.blue
                        .scaleEffect(1.5)
                    
                    Text("Hello world")
                    .foregroundColor(.white)
                    .padding()
                }
            }
        }
    }
}

user_18111072 · Answer

Use i.e. a VStack to fill the view, and then background will be extrapolated from the view at the edge:

    struct ContentView: View {

    @State var popoverVisible = false

    var body: some View {
        VStack {
            Button("Open Popover") {
                self.popoverVisible = true
            }
            .popover(isPresented: $popoverVisible) {
                VStack {
                    Text("Hello world")
                        .foregroundColor(.white)
                        .padding(8)
                    Spacer()
                    Text("Bye world")
                        .foregroundColor(.white)
                        .background(Color.blue)
                }
            }
        }
    }

}

SwiftUI popover background color

2 Answers