Несколько ZStack, управляющих zIndex

Question

Представьте себе сетку (nxn) квадратов. Эти квадраты - ZStacks. Он содержит оптический элемент (в данном случае круг). Если я смещу этот кусок над другим ZStack, он будет скрыт другим ZStack.

Я пытаюсь сыграть в шахматы. Представьте себе Круг () как кусок. Это была моя первая попытка:

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

Просто поместите все элементы статистики c ниже и все активные элементы рисунка вверху, как показано ниже, измените снимок кода. В таком случае все будет в одном координатном пространстве. (Конечно расчет координат для фигур выходит за рамки этой топи c) ...

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