Swiftui，多个几何学阅读器未正确读取单个组件的位置

Question

当我创建三个button（） s视图时，我想要geometryreader访问框架中的单个button（）的位置。尽管在UI中button（） s根据.position（）修改器显示其位置，geometryReader 出现相同的y所有三个button（） s的位置：

Button 3
minX: 125.83333333333334, maxX: 183.5
minY: 31.0, maxY: 193.0

Button 2
minX: 63.166666666666664, maxX: 120.83333333333334
minY: 31.0, maxY: 193.0

Button 1
minX: 0.5, maxX: 58.166666666666664
minY: 31.0, maxY: 193.0

代码是：

struct Learn_W_SingleButton: View {
    

    let buttonID: Int
    
    func buttonAction() {
        print("pressed \(buttonID)")
    }
    
    var body: some View {
        Button(action: buttonAction){
            Circle()
                .fill(Color.white)
                .frame(width: 50, height: 50)
                .shadow(radius: 10)
                .overlay(
                    Image(systemName: "heart.fill")
                        .foregroundColor(Color.red)
                        .font(.title2)
                )
        }
        .buttonStyle(.borderless)
            
    }
}


struct Learn_W_ThreeButtonsView_Ask: View {
    
    
    let button1 = Learn_W_SingleButton(buttonID: 0)
    let button2 = Learn_W_SingleButton(buttonID: 1)
    let button3 = Learn_W_SingleButton(buttonID: 2)
    
    
    var body: some View {
        

        GeometryReader { geo in
            HStack {
                GeometryReader { geo1 in
                    button1
                        .position(x: 50, y: 50)
                        .onAppear( perform: {
                            print()
                            print("Button 1")
                            print("minX: \(geo1.frame(in: .global).minX), maxX: \(geo1.frame(in: .global).maxX)")
                            print("minY: \(geo1.frame(in: .global).minY), maxY: \(geo1.frame(in: .global).maxY)")
                            
                        })
                }
                GeometryReader { geo2 in
                    button2
                        .position(x: 50 , y: 20
                        )
                        .onAppear( perform: {
                            print()
                            print("Button 2")
                            print("minX: \(geo2.frame(in: .global).minX), maxX: \(geo2.frame(in: .global).maxX)")
                            print("minY: \(geo2.frame(in: .global).minY), maxY: \(geo2.frame(in: .global).maxY)")
                        })
                }
                GeometryReader { geo3 in
                    button3
                        .position(x: 50, y: 100)
                        .onAppear(perform: {
                            print()
                            print("Button 3")
                            print("minX: \(geo3.frame(in: .global).minX), maxX: \(geo3.frame(in: .global).maxX)")
                            print("minY: \(geo3.frame(in: .global).minY), maxY: \(geo3.frame(in: .global).maxY)")
                        })
                }
                
                
            }
            
        }
        
        
    }
}


struct Learn_W_dragGesture_Previews: PreviewProvider {
    static var previews: some View {
        Learn_W_ThreeButtonsView_Ask()
    }
}

如果您可以帮助您如何打印，那就太好了在此类view（）中，将每个组件的正确位置删除，谢谢。

Answer 1

GeometryReader不读取内部元素的位置，它在创建的地方读取可用的外层空间。

如果要读取特定视图的框架，则可以使用放置在该视图的背景中的几何读取器，因为背景具有相同的大小，因此获得所有背景空间可以在指定的空间中提供其坐标。

这是用法的一种变体 https://stackoverflow.com/a/60214735/122999030 直接在两个步骤中。

这是另一个基于视图偏好的演示 https://stackoverflow.com/a/a/71613003/122999030