Pull-to-refresh ListView

dauuser

I would like to implement a Pull-to-refresh ListView for my app, which isn't that easy as I thought.
At first, I checked if contentY is dragged beyond it's bounds (~ 200px), and then I called my function to refresh the News Feed. It worked, but then the problems began. I load 10 news posts per function call, so if I am atYEnd, the listView will load the next 10 posts in the model. And now contentY will never return to 0, even if I am atYBeginning. So now my Pull-to-refresh function will never work again, because contentY will never ever be < - 200.

Then I tried a lot of other solutions, but I'm not happy with them, because I want the user to drag to a certain size.

Yesterday I was looking at, what's new in Qt 5.8.0 and found this:

Specialized Containers

Flickable type now has:
New topMargin, bottomMargin, leftMargin, and rightMargin properties allow extra margin space to be specified. This is useful to implement the pull-to-refresh functionality for a list.

How can be this useful for creating a pull-to-refresh listview, I really have no idea how to use these properties to implement a function like that? and why will my contentY never be 0 again?

jpnurmi

See Flickable::originY.

This is usually (0,0), however ListView and GridView may have an arbitrary origin due to delegate size variation, or item insertion/removal outside the visible region.

dauuser

@jpnurmi said in Pull-to-refresh ListView:

See Flickable::originY.

This is usually (0,0), however ListView and GridView may have an arbitrary origin due to delegate size variation, or item insertion/removal outside the visible region.

ah thanks, I suppose I overlooked this.

finally found a way:

// checks if listView is at the beginning to set new tempContentY to calculate pull-down distance (because contentY doesn't have to be 0 anymore)
        onAtYBeginningChanged: {
            if(atYBeginning){
                tempContentY = contentY
            }
        }

        // if tempContentY - contentY > 10*ySizeFactor refresh news
        onContentYChanged: {
            if(atYBeginning){
                if(Math.abs(tempContentY - contentY) > 10*ySizeFactor){
                    if(busyIndicator.running){
                        return;
                    } else {
                        busyIndicator.running = true
                        // call refresh function here                        
                    }
                }
            } else if(atYEnd){
                // load next newsposts
            }
        }

this sets everytime if the listView is at the beginning the new contentY minimum (tempContentY). and while contentY is changing, it checks if the difference between tempContentY and contentY reached the wished value.