Get current item in LazyVstack inside scrollview when scroll ends

Question

I want to print the currently displayed item in LazyVStack which is inside scrollview with paging enabled.

i have tried printing in onAppear of VerseView The issues with printing inside onAppear are-

onAppear gets called twice or more sometimes.
onAppear doesnt get triggered when i just begin to scroll and cancels the scroll.

I SIMPLY WANT TO PRINT THE CURRENT ITEM WHICH IS DISPLAYED IN SCREEN WHENEVER I RELEASES THE SCROLL.

CODE IS :

    struct SwippableView: View {
    var data: [VerseModel]
  
    
    var body: some View {
        
        ScrollView(.vertical) {
            LazyVStack(spacing: 0) {
                ForEach(data, id: \.id) { verse in
                   
                    VerseView(verse: verse)
                        .padding(0)
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                    
                }
            }.scrollTargetLayout()
                
        }
        .ignoresSafeArea()
        .scrollTargetBehavior(.paging)
        .scrollIndicators(.never)
        
    }
}

Additional info: Each view inside LazyVStack fills the entire screen

try using .scrollPosition(id....), see: developer.apple.com/documentation/swiftui/view/… — workingdog support Ukraine
– workingdog support Ukraine, Commented Mar 3, 2024 at 0:59
I know about scrollposition already,but dont know how to bind the current verse item in the code i provided. Could you write the code and help — Jaseel.Dev
– Jaseel.Dev, Commented Mar 3, 2024 at 5:36

workingdog support Ukraine · Accepted Answer · 2024-03-04 02:07:26Z

6

Try this approach using .scrollPosition and a .onChange to print the current verse that is on the screen when scrolling.

struct ContentView: View {
    // --- for testing
    let verses = [VerseModel(id: 1, verse: "verse-1"), VerseModel(id: 2, verse: "verse-2"), VerseModel(id: 3, verse: "verse-3")]
    var body: some View {
        SwippableView(data: verses)
    }
}

// --- for testing
struct VerseModel: Identifiable, Hashable {
    let id: Int
    var verse: String
}

struct SwippableView: View {
    var data: [VerseModel]
    @State var scrolledID: Int?  // <--- here

    var body: some View {
        Text("\(scrolledID ?? 1)")  // <--- for testing
        ScrollView(.vertical) {
            LazyVStack(spacing: 0) {
                ForEach(data, id: \.id) { verse in
                    VerseView(verse: verse)
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                }
            }.scrollTargetLayout()
        }
        .ignoresSafeArea()
        .scrollTargetBehavior(.paging)
        .scrollIndicators(.never)
        .scrollPosition(id: $scrolledID) // <--- here
        .onChange(of: scrolledID) {
            print("----> scrolledID: \(scrolledID)")  // <--- here
        }
    }
}

// --- for testing
struct VerseView: View {
    var verse: VerseModel
    
    var body: some View {
        ZStack {
            Rectangle().fill(Color.red.opacity(0.3))
            Text(verse.verse)
        }.frame(width: 333, height: 666)
    }
}

answered Mar 4, 2024 at 2:07

workingdog support Ukraine

38.9k5 gold badges47 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jaseel.Dev Over a year ago

it worked..thanks a lot..if you dont mind, can you help me with my latest question too?

Collectives™ on Stack Overflow

Get current item in LazyVstack inside scrollview when scroll ends

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related