← Back to team overview

ubuntu-phone team mailing list archive

Re: POC: Recycling ListView items

 

On Mon, Apr 18, 2016 at 4:41 PM, Andrea Bernabei <
andrea.bernabei@xxxxxxxxxxxxx> wrote:

>
>
> On Mon, Apr 18, 2016 at 11:57 AM, Omer Akram <omer.akram@xxxxxxxxxxxxx>
> wrote:
>
>> Hi!
>>
>> While working on a pet project[1] for the Phone, an issue that I faced
>> was stuttering scrolling in listviews. QML tips page[2] suggested to use
>> Flickable+Column+Repeater combination to have smooth scrolling, that worked
>> and is currently what I have implemented in my app but I always thought
>> that was not the perfect solution.
>>
>> With some knowledge of how Android ListView works and its mechanism of
>> recycling ListView items, I wrote a hack[3] to achieve something similar in
>> QML.
>>
>> What I am doing is:
>>
>>    - Create elements visible on screen at single instance + 2
>>    - Set contentHeight to number of elements*each element height
>>    - On flick upwards, when an element goes offscreen, set its Y
>>    property to the bottom of the list.
>>    - Not handled the down flick case just yet.
>>
>> So with only a few elements created, we can reuse same elements but with
>> different data. I am not sure if there already exists some standard
>> component for that or not. If not, then this idea is open for discussions
>> and I would like to contribute it as a standard component once we figure
>> out all the details and agree on them.
>>
>> Thanks!
>>
>>
> Hi Omer,
>
> I've got some early feedback :) I haven't had a proper look at the code
> yet but, if I understood it correctly, the idea is repositioning Items
> which are inside a Column.
> Isn't that against what Column is for?
>

Thanks for the response,

>From what I understand, its repositioning the whole column instead of
elements inside. But that may be my lack of understand of how Repeater
works ;-)


>
> Cheers,
> Andrea
>
>
>>
>> [1] https://launchpad.net/ubuntu-soundcloud-app
>> [2]
>> https://wiki.qt.io/Performance_tip_QML_other#Fixed_length_lists_with_Flickable.2BColumn.2BRepeater
>> [3]
>> http://bazaar.launchpad.net/~om26er/+junk/recycle_list_view/view/head:/RecycleListView/Main.qml
>>
>> --
>> Mailing list: https://launchpad.net/~ubuntu-phone
>> Post to     : ubuntu-phone@xxxxxxxxxxxxxxxxxxx
>> Unsubscribe : https://launchpad.net/~ubuntu-phone
>> More help   : https://help.launchpad.net/ListHelp
>>
>>
>

References