SwiftUI，多個 GeometryReader 無法正確讀取單個組件的位置

Question

當我創建了三個Button()的 View 並且我希望GeometryReader訪問單個Button()在框架中的位置時。 盡管在 UI 中Button()會根據.position()修飾符顯示它們的位置，但是GeometryReader會為所有三個Button() print出相同的Y位置：

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()中print出每個組件的正確位置，那就太好了。謝謝。

Answer 1

GeometryReader 不會讀取內部元素的位置，它會在創建它的位置讀取可用的外部空間。

如果要讀取特定視圖的幀，可以使用放置在該視圖背景中的 GeometryReader，因為背景具有相同的大小，因此獲取所有背景空間的 GeometryReader 可以提供其在指定空間中的坐標。

這是一種用法變體https://stackoverflow.com/a/60214735/12299030 ，直接但分兩個步驟。

這是另一個基於視圖偏好的演示https://stackoverflow.com/a/71613003/12299030