实现点击缩略图放大为全屏视图

响应式布局与视图状态

在 SwiftUI 中，实现点击缩略图放大为全屏视图是一个非常酷炫的效果！✨ 你会发现这比你想象的要简单。关键在于管理视图的状态。当用户点击一张图片时，我们需要改变一个状态变量。这个变量会告诉我们的视图，现在应该显示全屏模式了。

例如，你可以使用 @State 属性包装器来声明一个布尔值。这个值将控制全屏视图的可见性。

@State private var isFullScreen: Bool = false
@State private var selectedImage: Image? = nil

当 isFullScreen 为 true 时，全屏视图就会出现。当它为 false 时，全屏视图就会消失。

触发全屏显示

要实现点击缩略图触发全屏显示，你需要为每个缩略图添加一个手势识别器。最常用的就是 onTapGesture。当用户点击缩略图时，这个手势会执行一个动作。

在这个动作中，你会将 isFullScreen 设置为 true。同时，你还需要将当前被点击的图片赋值给 selectedImage。这样，全屏视图就知道要显示哪张图片了。

Image("thumbnail")
    .resizable()
    .scaledToFit()
    .onTapGesture {
        selectedImage = Image("fullScreenImage")
        isFullScreen = true
    }

这种方法确保了只有在用户明确点击时，全屏视图才会被激活。

构建全屏视图

全屏视图本身可以是一个简单的 ZStack。它包含你想要放大的图片。这个视图会根据 isFullScreen 的值条件性地显示。

你可以使用 if 语句来控制它的存在。当 isFullScreen 为 true 并且 selectedImage 不为空时，全屏视图就会被渲染。

• 背景叠加层: 通常，全屏视图会有一个半透明的背景。这能让用户知道他们进入了一个不同的模式。
• 图片显示: 使用 selectedImage 来显示被选中的图片。确保它能够填充整个屏幕。
• 关闭按钮: 提供一个方式让用户退出全屏模式。一个简单的点击手势就可以将 isFullScreen 设置回 false。

if isFullScreen, let image = selectedImage {
    ZStack {
        Color.black.opacity(0.8)
            .edgesIgnoringSafeArea(.all)
            .onTapGesture {
                isFullScreen = false
                selectedImage = nil
            }
        image
            .resizable()
            .scaledToFit()
    }
}

动画过渡的准备

虽然本章不深入 matchedGeometryEffect，但理解其基础是关键。为了让缩略图到全屏视图的过渡看起来平滑，你需要为两个视图都准备好 id 和 namespace。

• 唯一标识符: 每个视图都需要一个唯一的标识符。
• 命名空间: 所有的相关视图都必须共享同一个命名空间。

这些是实现“魔法移动”效果的基石。通过这些步骤，你已经成功地为你的应用添加了一个引人注目的交互功能！🚀 这种用户体验的提升，无疑会大大增加用户的满意度。