按下按钮时在屏幕上的某个位置动态放置形状 - SwiftUI

如果这是我的项目，我会进一步重构它以将每个圆圈移动到它自己的视图中，但这应该会让你开始。基本概念是存储一个圆数组（我创建了一个名为 的类型PlacedCircle）并将它们与当前圆一起呈现。您可以使用放置的圆形数组的大小，而不是使用变量来计算问题。

struct PlacedCircle {
    var id = UUID()
    var number: Int
    var position: CGSize
}

struct ContentView: View {
    
    //tracking position and boundary
    @State private var currentPosition: CGSize = .zero
    @State private var newPosition: CGSize = .zero
    @State private var parentRect: CGRect = .zero
    @State private var childRect: CGRect = .zero

    //convert negative y value to positive and positive to negative
    @State public var xVal: Int = 0
    @State public var yVal: Int = 0
    
    @State public var placedCircles : [PlacedCircle] = []  //<-- Here

    //boundary for eisenhower matrix
    func correctPostion() {
        print(self.currentPosition)
        if self.currentPosition.width > 200 {
            self.currentPosition.width = 200
        }
        if self.currentPosition.height > 200 {
            self.currentPosition.height = 200
        }
        if self.currentPosition.width < -200 {
            self.currentPosition.width = -200
        }
        if self.currentPosition.height < -200 {
            self.currentPosition.height = -200
        }
    }

    var body: some View {
        return
            ZStack {
                
                GeometryReader { geo in
                    Text("current position: \n(X: \(xVal) Y: \(yVal))")
                        .position(x: geo.size.width / 2, y: 75)
                        .font(.title)
                        .multilineTextAlignment(.center)
                    
                    Button(action: {
                        self.placedCircles.append(PlacedCircle(number: placedCircles.count + 1, position: currentPosition)) //<-- Here
                        
                        //reset the values
                        self.currentPosition = .zero
                        self.newPosition = .zero
                        self.xVal = 0
                        self.yVal = 0
                        
                    }, label: {
                        Circle()
                            .overlay(
                                Text("Place")
                                    .font(.title2)
                                    .bold()
                                    .foregroundColor(.white))
                    })
                    .frame(width: 75, height: 75, alignment: .center)
                    .position(x: geo.size.width / 2, y: geo.size.height - 100)
                }
                
                VStack{
                    ZStack {
                        //The current circle
                        Circle()
                            .overlay(Text("\(placedCircles.count + 1)").font(.title).foregroundColor(.white))
                        .frame(width: 35, height: 35, alignment: .center)
                        .foregroundColor(.red)
                        .offset(x: currentPosition.width, y: currentPosition.height)
                            .background(GeometryGetter(rect: $childRect))

                        .gesture(DragGesture(minimumDistance: 0, coordinateSpace: .global)
                                .onChanged { value in
                                    self.currentPosition = CGSize(width: value.translation.width + self.newPosition.width, height: value.translation.height + self.newPosition.height)
                                    
                                    self.correctPostion()
                                }
                                .onEnded { value in
                                    self.currentPosition = CGSize(width: value.translation.width + self.newPosition.width, height: value.translation.height + self.newPosition.height)
                                    
                                    self.correctPostion()
                                    
                                    xVal = Int(self.currentPosition.width)
                                    yVal = Int(self.currentPosition.height) - (Int(self.currentPosition.height) * 2)
                                    
                                    self.newPosition = self.currentPosition
                                }
                        
                        )
                        
                        ForEach(placedCircles, id: \.id) { (placed : PlacedCircle) in
                            Circle()
                                .overlay(Text("\(placed.number)").font(.title).foregroundColor(.white))
                                .frame(width: 35, height: 35, alignment: .center)
                                .foregroundColor(.red)
                                .offset(x: placed.position.width, y: placed.position.height)
                                //.background(GeometryGetter(rect: $childRect))
                        }
                    }
                    .frame(width: 400, height: 400, alignment: .center)
                    .border(Color.black, width: 3)
                    .background(GeometryGetter(rect: $parentRect))
                   
                }
                
            }
    }
}