Попытка создать лайтбокс изображения с помощью SwiftUI

Question

Я действительно новичок в этом, и я пытаюсь запутаться, но мог бы действительно помочь рукой!

Я пытаюсь создать средство просмотра изображений, которое функционирует в качестве лайтбокса (например, простую версию из найденных в Apollo / Reeder и т. Д.), Чтобы:

• несколько эскизов разных изображений могут отображаться в одном представлении
• при нажатии каждый из них будет расширяться, чтобы заполнить ширину экрана, перекрывая остальную часть содержимого на экране (в конечном итоге я хотел бы затемнить и размыть фоновое содержимое, которое, как мне кажется, могло бы сделано с черным прямоугольником, наложенным с эффектом размытия)
• при повторном нажатии (или перетаскивании) изображение исчезнет и уменьшится до исходного размера миниатюры

Пока у меня есть этот подвид:

struct imageViewer : View {

    let image: String
    @State private var isTapped = false
    @State private var dragPosition = CGSize.zero

    var body: some View {
                Image(self.image)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: self.isTapped ? UIScreen.main.bounds.width : UIScreen.main.bounds.width / 3, alignment: .center)
                    .offset(x: self.dragPosition.width, y: self.dragPosition.height)
                    .animation(.fluidSpring(stiffness: 150))
                    .tapAction {
                        self.isTapped.toggle()
                    }
                    .gesture(
                        DragGesture()
                            .onChanged { value in
                                //prevent dragging when thumbnail size
                                if self.isTapped {
                                self.dragPosition = value.translation
                                }
                            }
                            .onEnded { value in
                                //revert to thumbnail size when dragged beyond bounds
                                if self.dragPosition.height > 200 || self.dragPosition.height < -200 || self.dragPosition.width > 200 || self.dragPosition.width < -200 {
                                    self.isTapped.toggle()
                                }
                                self.dragPosition = .zero
                        }
                    )
    }
}

, которая обеспечивает анимацию касания и перетаскивания , но когда я вставляю подпредставление в другое представление согласно приведенному ниже коду, я не могу понять, как сделать масштабированное состояние наверху ZIndex, поэтому он перекрывает остальное содержимое в представлении.

На данный момент это (по понятным причинам) сдвигает все еще с дороги.

Есть несколько других проблем, о которых я знаю: - При увеличении изображение не отцентрировано по вертикали - Когда два imageViewers () находятся на одном экране, они не заполняют всю ширину экрана при увеличении. Я думаю, что мне нужно использовать GeometryReader, а не UIScreen для ширины, но тогда изображение, кажется, придерживается верхнего левого угла, а не центрируется.

struct lightBoxTest : View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Tap the thumbnail below to view it full screen. Drag to dismiss it.")
                    .lineLimit(nil)
                    .padding()
                imageViewer(image: "IMG_9439")
                Text("Dummy image below image")
            }
            .navigationBarTitle(Text("Lighbox Test"))
        }
    }
}

Я пытался найти отличный ответ на этот вопрос , но если есть глобальная привязка для переключения масштабирования, то я не думаю, что вы сможете получить больше чем один масштабируемый эскиз одновременно?

Любые указатели в правильном направлении будут приветствоваться, заранее спасибо и извините за запутанный беспорядок вопроса!