How to change the size and position of popover's page in swiftUI?

Question

I want to set the position and size of Popover page.

I tried all parameters of func popover, I think it may be related with attachmentAnchor and arrowEdge.

Here is my code:

    import SwiftUI

    struct ContentView : View {
        @State var isPop = false

        var body: some View {

            VStack{
                Button("Pop", action: {self.isPop = true})
                    .popover(isPresented: $isPop,  attachmentAnchor: .point(UnitPoint(x: 20, y: 20)), arrowEdge: .top, content: {return Rectangle().frame(height: 100).foregroundColor(Color.blue)})
            }

        }

    }

The effect I want:

Answer 1

Here is kind of correct configuration

struct ContentView: View {
    @State private var isPop = false
    @State private var text = ""

    var body: some View {
        VStack{
            Button("Pop") { self.isPop.toggle() }
                .popover(isPresented: $isPop,
                         attachmentAnchor: .point(.bottom),   // here !
                         arrowEdge: .bottom) {                // here !!
                    VStack { // just example
                        Text("Test").padding(.top)
                        TextField("Placeholder", text: self.$text)
                            .padding(.horizontal)
                            .padding(.bottom)
                            .frame(width: 200)
                    }
            }
        }

    }
}

The attachmentAnchor is in UnitPoint, ie in 0..1 range with predefined constants, and arrowEdge is just Edge, to which popover arrow is directed. And size of popover is defined by internal content, by default it tights to minimal, but using standard .padding/.frame modifiers it can be extended to whatever needed.

Answer 2

One solution that I found that worked is putting padding around the button and then offset. I needed the offset to reposition the button correctly after the padding was put in. So depending on your design just a padding should work. ArrowEdge parameter and attactmentAnchor are also important but default work well for me with the popover below the button.

For example:

VStack {
    Button("Pop", action: {self.isPop = true})
        .padding(.bottom, 6) // add in padding to position the popover
        .popover(isPresented: $isPop,  attachmentAnchor: .point(UnitPoint(x: 20, y: 20)), arrowEdge: .top, content: {return Rectangle().frame(height: 100).foregroundColor(Color.blue)})
}