SwiftUI：当用户在第一个 ScrollView 中点击该项目时，在特定索引处加载第二个 ScrollView

Posted 2023-03-16

【中文标题】SwiftUI：当用户在第一个 ScrollView 中点击该项目时，在特定索引处加载第二个 ScrollView

【英文标题】：SwiftUI: loading a 2nd ScrollView at a specific index when the user tapped on that item in the 1st ScrollView

【发布时间】：2020-04-15 05:11:30

【问题描述】：

场景是，当用户在第一个 ScrollView 中点击该索引项时，在特定索引处加载第二个 ScrollView。

Aka，在第一个图像列表中选择一个图像，然后打开第二个图像列表，所选索引图像全屏显示。

如何在 SwiftUI 中做到这一点？

///这里是代码。

private struct ImageList: View 
    var images: [ImageViewModel]
    @State private var showSheet = false
    @State private var selectedImage = ImageViewModel.default

    var body: some View 

        VStack(alignment: .leading) 
            Text("Images")
                .font(.headline)
            ScrollView(.horizontal) 
                HStack(alignment: .top, spacing: 6) 
                    ForEach(images, id: \.self)  image in
                        KFImage(source: .network(image.fileURL))
                            .resizable()
                            .frame(width: 200)
                            .aspectRatio(1.77, contentMode: .fit)
                            .onTapGesture 
                                self.selectedImage = image
                                self.showSheet.toggle()
                        
                    
                .sheet(isPresented: $showSheet) 
                    PresentedImageList(images: self.images)
                
            .frame(height: 120)
        
        .padding(.horizontal).padding(.bottom)
    


private struct PresentedImageList: View 
    var images: [ImageViewModel]

    var body: some View 

        GeometryReader  gr in
            ScrollView(.horizontal, showsIndicators: false) 
                HStack(alignment: .top, spacing: 6) 
                    ForEach(self.images, id: \.self)  image in
                        KFImage(source: .network(image.fileURL))
                            .resizable()
                            .frame(width: gr.size.width)
                            .aspectRatio(1.77, contentMode: .fit)

                    
                
            .background(Color.black)
        

    

【参考方案1】：

您需要将图像（名称/id）传递给工作表，然后使用工作表中的信息来显示按下的图像。详细答案可以在here找到。

【讨论】：

好吧，传递给工作表的数据是一个图像数组/列表，但在我的问题中不是单个图像。我想要的是用工作表模式呈现水平滚动图像列表，但起始图像应该是点击的。

您可以在 PresentedImageList 视图中添加一个额外的变量，这样您就可以传递数组和图像 ID 信息，例如：PresentedImageList(images: images, imageID: image.id)

是的，我可以这样做，你是对的。但是现在阻碍我的主要事情是如何在呈现的图像列表中显示选定的图像。请记住，它是ForEach loop，默认情况下，它从索引 0 开始。一种想法是设置 ForEach 从点击的索引项开始，但我仍然需要向左滚动。

【参考方案2】：

我找到了解决方案，并将其更新到我的another post。 简单地说，我使用的是 UIPageView 而不是 UIScrollView。并将主视图的索引发送到 PageView 的 @State。并在PageView的init()中设置@State值。