Question

我真的很陌生，我想弄清楚自己的方式，但是真的可以帮上忙！

我正在尝试创建一个用作灯箱的图像查看器（例如Apollo / Reeder等中的灯的简单版本），以便：

可以在单个视图中显示不同图像的多个缩略图
点击时，每一个都会展开以填充屏幕的宽度，覆盖屏幕上的其余内容（最终，我想对背景内容进行调暗和模糊处理，可以用覆盖有模糊效果的黑色矩形完成）
再次轻击（或拖动）时，图像将消失并缩小到原始缩略图大小

到目前为止，我有这个子视图：

M2

哪个提供了tap and drag animations，但是当我按照下面的代码将子视图插入到另一个视图中时，我无法弄清楚如何将缩放状态置于ZIndex的顶部，以便将其覆盖在视图中的其余内容。

此刻，shifts everything还是（可以理解的）其他方式了。

我知道其他一些问题： -缩放时，图片未垂直居中 -当两个imageViewers（）在同一屏幕上时，它们在缩放时不会占据屏幕的整个宽度。我想我需要使用GeometryReader而不是UIScreen作为宽度，但是图像似乎粘在左上角而不是居中。

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

我一直在努力寻找对this question的出色答案，但是如果存在全局绑定来切换缩放，那么我认为您将无法拥有多个缩放一次查看缩略图？

任何朝着正确方向的指点都将受到欢迎，在此先感谢并为您带来混乱的问题！

尝试使用SwiftUI制作图像灯箱

0 个答案: