时间戳

首页 > 解决方案 > swiftui 2.0 图片库 onTapgesture 只显示数组中的第一张图片

swiftui - swiftui 2.0 图片库 onTapgesture 只显示数组中的第一张图片

问题描述

我正在为一个应用程序创建一个可重复使用的图库视图，并且在点击任何图片时遇到困难，它假设变成全屏但每次只显示数组中的第一张图片，无论点击图片。下面是我的代码，谢谢。

导入 SwiftUI

struct ReusableGalleryView: View { let greenappData: GreenAppNews

let gridLayout: [GridItem] = Array(repeating: GridItem(.flexible()), count: 3)

@State private var fullscreen = false
@State private var isPresented = false

var body: some View {
    VStack{

            ScrollView{
                LazyVGrid(columns: gridLayout, spacing: 3) {
                    ForEach(greenappData.GreenAppGallery, id: \.self) { item in
                        Image(item)
                          .resizable()
                            .frame(width: UIScreen.main.bounds.width/3, height: 150)
                            .onTapGesture {
                                self.isPresented.toggle()
                                print(" tapping number")
                                      }
                            .fullScreenCover(isPresented: $isPresented) {
                                FullScreenModalView( imageFiller: item)
                            }
                          .background(Color.gray.opacity(0.5))
                    }
                }
                .padding(.horizontal)
            }
    }
}

}

这是 json 数据的示例：

{“id”：“1”，“GreenAppGallery”：[“Picture-1”，“Picture-2”，“Picture-3”，“Picture-4”，“Picture-5”，“Picture-6”， “图片 7”、“图片 8”、“图片 9”、“图片 10”] },

标签： swiftuiimage-gallery

解决方案

fullScreenCover, likesheet倾向于在 iOS 14 中使用isPresented:.

要修复它，您可以更改为fullScreenCover(item: )表单。

没有你所有的代码，我无法给你一个确切的版本，但要点是：

  1. 删除你的isPresented变量
  2. presentedItem用一个可选的变量替换它。可能是您画廊中的数据类型。请注意，它必须符合Identifiable（意味着它必须具有id属性）。
  3. 而不是切换isPresented，设置presentedItem为item
  4. 使用fullScreenCover(item: ) { presentedItem in FullScreenModalView( imageFiller: presentedItem) }并将其传递给您的presentedItem变量
  5. 移动fullScreenCover使其连接到ForEach循环而不是Image

使用此系统，您应该会看到它对正确的项目做出响应。

这是我的另一个答案，其中包括sheet：@State var not updated as expected in LazyVGrid

推荐阅读