无法点击 SwiftUI 网格图像以显示 DetailView

Posted 2023-02-24

【中文标题】无法点击 SwiftUI 网格图像以显示 DetailView

【英文标题】：SwiftUI Grid Images Can't be Tapped to Show DetailView

【发布时间】：2019-12-21 22:16:12

【问题描述】：

我正在尝试在 SwiftUI 中创建一个集合视图。我可以创建网格（在 这种情况下）但我还没有找到一种方法来单击图像并转换到另一个视图 - 既不是模态的，也不是完整的视图。我将图像存储在 CoreData 中并使用 Paul Hudson 的方法将图像分成几行：

https://www.hackingwithswift.com/example-code/language/how-to-split-an-array-into-chunks

此代码确实允许转换，但只需单击一下，它就会在 HStack 中的每个图像之间循环 即使每张照片都有自己的 NavigationLink 包装器。

我也尝试过一个版本，我用按钮制作网格并将图像放入 按钮。更糟糕的是 - 详细内容不正确，Xcode 抱怨 强大的是：“警告：尝试在已经呈现的 > 上呈现 >（空）。” 我还尝试将 .onTapGesture 添加到每个图像。与按钮类似的故障。

struct ChunkedContentView: View 

    @Environment(\.managedObjectContext) var managedObjectContext
    @FetchRequest(fetchRequest: DermPhoto.getAllDermPhotos()) var dermPhotos: FetchedResults<DermPhoto>

    //@State private var columnCount = 3//hard coded to 3 at the moment
    @State private var showDetailView = false

    var body: some View 

        let chunkThis = DermPhoto.chunkTheDermPhotos()

        return GeometryReader  geo in
            NavigationView 
                List 
                    ForEach(0 ..< chunkThis.count)  index in
                        HStack 
                            ForEach(chunkThis[index])  p in
                                NavigationLink(destination: DetailView(passedDerm: p)) 

                                Image(uiImage: UIImage(data: p.myImage!)!)
                                    .resizable()
                                    .aspectRatio(contentMode: .fill)
                                    .frame(width: ((geo.size.width / 3) - 15), height: ((geo.size.width / 3) - 15))
                                    .border(Color.black)
                                    .clipped()
                                    //comment out NavigationLink and this does not work either
                                    //.onTapGesture 
                                    //self.showDetailView.toggle()
                                    //
                                    //.sheet(isPresented: self.$showDetailView) 
                                    //DetailView(passedDerm: p)
                                    //
                                    //either above or nav link
                                //nav link
                            
                        
                    
                
                .navigationBarTitle("Time Series")
            //nav
        //geo
    

作为第二个问题，有没有办法禁止显示 导航链接？

任何指导将不胜感激。 Xcode 11.3 (11C29)

【问题讨论】：

只需在您的代码快照中使用 ScrollView 而不是 List 即可，所有工作（以及 chevron /disclosure indicator/ 都已消失）

哇。简单得惊人。由于某种原因，更改为 ScrollView 会导致我的图像被蓝色方块替换。我将对 p.myImage 的调用更改为静态系统映像，它就像您描述的那样工作。虽然我的图像不见了，但详细视图中的数据是正确的，所以我得到了核心数据实体，但是从 List 到 ScrollView 的更改影响了图像的显示。

虽然看起来很奇怪，但如果我将 .buttonStyle(PlainButtonStyle()) 添加到 NavigationLink 中，图像会按预期显示。

【参考方案1】：

@Asperi 值得称赞 - 使用 ScrollView 而不是 List。这也删除了披露指标。如果您使用图片，您需要将.buttonStyle(PlainButtonStyle()) 添加到NavigationLink。如果您使用系统图标，则可能不需要该步骤。