SwiftUI: loading a 2nd ScrollView at a specific index when the user tapped on that item in the 1st ScrollView

Question

The scenario is that, loading a 2nd ScrollView at a specific index when the user tapped on that index item in the 1st ScrollView.

Aka, selecting one image in 1st image list then open the 2nd image list with selected index image showed in full-screen.

How to do it in SwiftUI?

/ / / Here is the code.

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)
        }

    }
}

score 0 · Answer 1 · answered Apr 16 '20 at 19:57

0

You need to pass the image (name/id) to the sheet and then use the information in the sheet to display the pressed image. A detailed answer can be found here.

answered Apr 16 '20 at 19:57

unequalsine

184
2
10

Well, the data passing to sheet is an image array/list but not single image in my question. What I want is to present the horizontal scroll image list with sheet mode but starting image should be the tapped one. – Zhou Haibo Apr 17 '20 at 08:30
You can add an extra variable in your PresentedImageList view, so you can pass both array and image ID information, something like: `PresentedImageList(images: images, imageID: image.id)` – unequalsine Apr 17 '20 at 08:33
Yeah, I could do that, you are correct. But major thing obstruct me now is how to show the selected image in the presented image list. Remember, it is ```ForEach loop```, by default, it is started from index 0. One idea is that setting ForEach start with the tapped index item, but I still need to scroll to left. – Zhou Haibo Apr 17 '20 at 12:44

score 0 · Answer 2 · answered Apr 21 '20 at 04:11

0

I found the solution, and update it in my another post. Simply say, I'm using UIPageView instead UIScrollView. And sending index of main View to PageView's @State. And set the @State value in init() of PageView.

answered Apr 21 '20 at 04:11

Zhou Haibo

1,681
1
12
32

SwiftUI: loading a 2nd ScrollView at a specific index when the user tapped on that item in the 1st ScrollView

2 Answers2