控制zIndex的多个ZStack

Question

想象一个网格(n X n)个正方形。这些正方形是ZStacks。它包含一个优化块(在本例中是一个圆圈)。如果我将这个片段偏移到另一个ZStack上，它就会被另一个ZStack隐藏起来。

​

​

我想做的是一个国际象棋游戏。假设Circle()是一个片段。这是我最初的尝试：

struct ContentView: View {

    @State var circle1Offset: CGSize = .zero
    var body: some View {
        VStack {
            ZStack {
                Color.blue
                Circle().fill(Color.black)
                .frame(width: 50, height: 50)
                .offset(circle1Offset)
                .gesture(
                    DragGesture()
                        .onChanged { value in
                            self.circle1Offset = value.translation
                        }
                )
            }
            .frame(width: 150, height: 150)
            ZStack {
                Color.red
            }
            .frame(width: 150, height: 150)

        }
    }
}

此外，我还尝试添加overlay()而不是使用ZStack。不确定在这种情况下哪个更精确，但不幸的是，我不能像这样添加一个“可选的”覆盖：

struct ContentView: View {

    @State var circle1Offset: CGSize = .zero
    var body: some View {
        VStack {
            Color.blue
                .frame(width: 150, height: 150)
                .overlay(
                    Circle().fill(Color.black)
                        .frame(width: 50, height: 50)
                        .offset(circle1Offset)
                        .gesture(
                            DragGesture()
                                .onChanged { value in
                                    self.circle1Offset = value.translation
                            }
                    )
            )
            Color.red
                .frame(width: 150, height: 150)

        }
    }

    func tileHasPiece() -> Circle? {
        return Circle() // This would consult my model
    }
}

但正如我所说的，我不知道如何使用tileHasPiece()来添加依赖于此的覆盖图。

Answer 1

只需将所有的板静态元素放在下面，所有的图活动元素放在上面，就像下面修改你的代码快照一样。在这种情况下，一切都将在一个坐标空间中。(当然，图形坐标的计算不在本主题的讨论范围内)...

struct FTContentView: View {

    @State var circle1Offset: CGSize = .zero
    var body: some View {
        ZStack {
            // put board below
            VStack {
                Color.blue
                    .frame(width: 150, height: 150)
                Color.red
                    .frame(width: 150, height: 150)
            }

            // put figure above
            Circle().fill(Color.black)
            .frame(width: 50, height: 50)
            .offset(circle1Offset)
            .gesture(
                DragGesture()
                    .onChanged { value in
                        self.circle1Offset = value.translation
                    }
                )
        } // board coordinate space
    }
}