时间戳

首页 > 解决方案 > 将图像从缩略图动画到全屏

swiftui - 将图像从缩略图动画到全屏

问题描述

当用户点击它展开以填充屏幕的照片时打开照片的详细视图时，是否可以复制 iOS 照片应用程序的行为 - 在 SwiftUI 中。

我可以在当前视图的新视图中打开照片，但是我似乎无法管理如何将视图中的图像从当前位置扩展到全屏 - 当它嵌套在堆栈中时，这是否可能？

这是我的 UI 的基本版本：

struct ContentView: View {

    var body: some View {

        VStack {
            BannerView()
                .padding()
            Text("Title")
        }

    }
}

struct BannerView: View {

    var body: some View {
        HStack {
            VStack {
                Image(systemName: "rectangle.fill")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .padding()
                    .onTapGesture {
                        // Enbiggen image
                }
            }
            VStack {
                Text("Text")
                Text("Text 1")
                Text("Text 2")
            }
        }
        .background(Color(UIColor.systemBackground))
    }

}

因此，当用户在 BannerView 中点击图像时，它应该根据当前大小进行动画处理以填充屏幕。

我可以在脑海中管理它的唯一方法是在 ContentView 中隐藏 Bannerview 图像上的重复图像并将可见的动画然后缩放到全屏，但是我将如何检测 BannerView 中图像的位置和大小？

标签： swiftui

解决方案

State通过为矩形的纵横比添加一个简单的缩放动画，我能够使图像变为全屏

struct BannerView: View {
    @State var contentMode = ContentMode.fit

    var body: some View {
        HStack {
            VStack {
                Image(systemName: "rectangle.fill")
                    .resizable()
                    .aspectRatio(contentMode: contentMode)
                    .padding()
                    .onTapGesture {
                        withAnimation {
                            self.contentMode = ContentMode.fill
                        }
                }
            }
            VStack {
                Text("Text")
                Text("Text 1")
                Text("Text 2")
            }
        }
        .background(Color(UIColor.systemBackground))
    }
}

推荐阅读