SwiftUI 将位置设置为不同视图的中心 [英] SwiftUI set position to center of different view

问题描述

我有两种不同的视图，一种是红色矩形，一种是黑色矩形，它们始终位于屏幕底部.当我点击红色矩形时，它应该将自己定位在另一个矩形内.

I have two different views, one red rect and one black rect that is always positioned on the bottom of the screen. When I click the red rect it should position itself inside the other rect.

目前红色矩形是静态定位的:.position(x: self.tap ? 210 : 50, y: self.tap ? 777 : 50).有没有办法动态替换 210 和 777 到黑色矩形中心位置的位置?

Currently the red rect is positioned statically: .position(x: self.tap ? 210 : 50, y: self.tap ? 777 : 50). Is there a way to replace the 210 and 777 dynamically to the position of the black rects center position?

我知道我可以使用 GeometryReader 来获取视图大小，但是如何使用该大小来定位不同的视图?这甚至是正确的方法吗?

I know that I can use the GeometryReader to get the views size, but how do I use that size to position a different view? Would this even be the right way?

struct ContentView: View {

    @State private var tap = false

    var body: some View {
        ZStack {
            VStack {
                Spacer()
                RoundedRectangle(cornerRadius: 10)
                    .frame(maxWidth: .infinity, maxHeight: 50, alignment: .center)
            }
            .padding()

            VStack {
                ZStack {
                    Rectangle()
                        .foregroundColor(.red)
                    Text("Click me")
                        .fontWeight(.light)
                        .foregroundColor(.white)
                }
                .frame(width: 50, height: 50)
                .position(x: self.tap ? 210 : 50, y: self.tap ? 777 : 50)
                .onTapGesture {
                    withAnimation {
                        self.tap.toggle()
                    }
                }
            }
        }
    }
}

推荐答案

这里是可能的方法(稍微简化您的初始快照并添加一些方便的View 扩展).

Here is possible approach (with a bit simplified your initial snapshot and added some convenient View extension).

使用 Xcode 11.2/iOS 13.2 测试

Tested with Xcode 11.2 / iOS 13.2

extension View {
    func rectReader(_ binding: Binding<CGRect>, in space: CoordinateSpace) -> some View {
        self.background(GeometryReader { (geometry) -> AnyView in
            let rect = geometry.frame(in: space)
            DispatchQueue.main.async {
                binding.wrappedValue = rect
            }
            return AnyView(Rectangle().fill(Color.clear))
        })
    }
}

struct ContentView: View {

    @State private var tap = false
    @State private var bottomRect: CGRect = .zero

    var body: some View {
        ZStack(alignment: .bottom) {
            RoundedRectangle(cornerRadius: 10)
                .frame(maxWidth: .infinity, maxHeight: 50, alignment: .center)
                .padding()
                .rectReader($bottomRect, in: .named("board"))

            Rectangle()
                .foregroundColor(.red)
                .overlay(Text("Click me")
                    .fontWeight(.light)
                    .foregroundColor(.white)
                )
                .frame(width: 50, height: 50)
                .position(x: self.tap ? bottomRect.midX : 50,
                          y: self.tap ? bottomRect.midY : 50)
                .onTapGesture {
                    withAnimation {
                        self.tap.toggle()
                    }
                }
        }.coordinateSpace(name: "board")
    }
}

这篇关于SwiftUI 将位置设置为不同视图的中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！