Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In SwiftUI, where are the control events, i.e. scrollViewDidScroll to detect the bottom of list data

Tags:

swift

swiftui

In SwiftUI, does anyone know where are the control events such as scrollViewDidScroll to detect when a user reaches the bottom of a list causing an event to retrieve additional chunks of data? Or is there a new way to do this?

Seems like UIRefreshControl() is not there either...

like image 380
J. Edgell Avatar asked Jun 14 '19 16:06

J. Edgell


2 Answers

Plenty of features are missing from SwiftUI - it doesn't seem to be possible at the moment.

But here's a workaround.

TL;DR skip directly at the bottom of the answer

An interesting finding whilst doing some comparisons between ScrollView and List:

struct ContentView: View {

    var body: some View {

        ScrollView {
            ForEach(1...100) { item in
                Text("\(item)")
            }
            Rectangle()
                .onAppear { print("Reached end of scroll view")  }
        }
    }

}

I appended a Rectangle at the end of 100 Text items inside a ScrollView, with a print in onDidAppear.

It fired when the ScrollView appeared, even if it showed the first 20 items.

All views inside a Scrollview are rendered immediately, even if they are offscreen.

I tried the same with List, and the behaviour is different.

struct ContentView: View {

    var body: some View {

        List {
            ForEach(1...100) { item in
                Text("\(item)")
            }
            Rectangle()
                .onAppear { print("Reached end of scroll view")  }
        }
    }

}

The print gets executed only when the bottom of the List is reached!

So this is a temporary solution, until SwiftUI API gets better.

Use a List and place a "fake" view at the end of it, and put fetching logic inside onAppear { }

like image 161
Matteo Pacini Avatar answered Nov 02 '22 05:11

Matteo Pacini


You can to check that the latest element is appeared inside onAppear.

struct ContentView: View {
    @State var items = Array(1...30)

    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                Text("\(item)")
                .onAppear {
                    if let last == self.items.last {
                        print("last item")
                        self.items += last+1...last+30
                    }
                }
            }
        }
    }
}
like image 44
Victor Kushnerov Avatar answered Nov 02 '22 04:11

Victor Kushnerov