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
    }
}

多个ZStack控制zIndex

1 个答案: