如何在swiftUI中更改弹出框页面的大小和位置? [英] How to change the size and position of popover's page in swiftUI?

问题描述

我想设置弹出页面的位置和大小.

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

我尝试了func popover的所有参数，我认为它可能与attachmentAnchor和arrowEdge有关.

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

这是我的代码:

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

        }

    }

我想要的效果:

推荐答案

这是一种正确的配置

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

    }
}

attachmentAnchor 在UnitPoint中，即在预定义常量的0..1范围内，而 arrowEdge 只是Edge，弹出箭头指向该Edge.弹出窗口的大小由内部内容定义，默认情况下会缩小到最小，但是使用标准的.padding/.frame修饰符可以将其扩展为所需的任何内容.

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.

这篇关于如何在swiftUI中更改弹出框页面的大小和位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！