The listview spend too much time to flick

tigriswind

i use the listview to show a list of page, every page show one picture;

right now when i drag the listview, i find it spend too much time to flick!

how can i accelerate the flicking speed ? or need i create a custom listview (i find it too hard to do that as the listview class in qml
can not inherit).

Chuck Gao

Hi tigriswind,

I think there is a couple of things you need check:

Is the picture's size is too much to be loaded
If the page hold the whole screen(which width maybe equal to the mainwindow's width), make sure the clip property of listview was set be true. It can ignore your pages out of the screen/range for rendering
Make sure your code is correct for the case. :D

Br

tigriswind

thanks for your reply;

when i change the currentIndex for listview,every thing work well. but when i use drag to slide the

listview, the speed is slow and the render performant is bad;

after i deep into the declarative c++ source, i find the speed is according to multiple factors ,as the drag duration, the drag distance ......

tigriswind

you can find the similar source at qt/examples/declarative/toys/corkboards in the qt example

Chuck Gao

Can you paste some code?

tigriswind

Rectangle {
width: 800; height: 480

ListModel {
    id: list

    ListElement {
        name: "Sunday"
        notes: [
            ListElement { noteText: "Lunch" },
            ListElement { noteText: "Birthday Party" }
        ]
    }
...........................
    ListElement {
        name: "Saturday"
        notes: [
            ListElement { noteText: "Drink" },
            ListElement { noteText: "Download Qt\nPlay with QML" }
        ]
    }
}

ListView {
    id: flickable

    anchors.fill: parent
    focus: true
    snapMode: ListView.SnapOneItem
    highlightRangeMode: ListView.StrictlyEnforceRange
    highlightMoveSpeed: 4000
    orientation: ListView.Horizontal
    model: list
    delegate: Day { }
}

}

//in the Day.qml only show a Image
Component {
................
Image {
source: "cork.jpg"
width: page.ListView.view.width
height: page.ListView.view.height
fillMode: Image.PreserveAspectCrop
clip: true
}
........................
}

thisisbhaskar

Place @ at the beginning and at the end of the code block. Its very difficult to read the code..

tigriswind

sorry

@
Rectangle {
width: 800; height: 480

ListModel {
    id: list 
    ListElement { 
        name: “Sunday” 
        notes: [ 
                ListElement { noteText: “Lunch” },
                ListElement { noteText: “Birthday Party” }
                ] 
    }

    // ..........
    ListElement { 
        name: “Saturday” 
        notes: [ 
                ListElement { noteText: “Drink” },
                ListElement { noteText: “Download Qt\nPlay with QML” } 
                ] 
    }
} 

ListView {
    id: flickable 
    anchors.fill: parent 
    focus: true 
    snapMode: ListView.SnapOneItem 
    highlightRangeMode: ListView.StrictlyEnforceRange 
    highlightMoveSpeed: 4000 
    orientation: ListView.Horizontal 
    model: list 
    delegate: Day { }
}

}

//in the Day.qml only show a Image
Component {
// ..........
Image {
source: “cork.jpg”
width: page.ListView.view. widht
height: page.ListView.view.height
fillMode: Image.PreserveAspectCrop
clip: true
}
// ..........
}
@

EDIT:
I reformatted the code, please wrap code sections in a single ( at the beginning of the block and one at the end, do not wrap every line. Please use correct indentation too, to increase its readability.
Volker