QML State Delegates

[lunatic]

hey guys,

I have a ListView with a delegate-property. This delegate has a MouseArea which changes the state if the user clicks on the delegate-model.
the documentation says: http://doc.qt.nokia.com/4.7/qml-listview.html#delegate-prop

bq. Note: Delegates are instantiated as needed and may be destroyed at any time. State should never be stored in a delegate.

So what is the workaround? Cause every time if the delegate-model is out of view the state is set to the default state.

I use QtQuick with a C++-Data Model.

need help

thanks

[Kxyu]

well, never means never.BUT you can try setting cacheBuffer property to a large enough amount, that prevents delegates from being destroyed while they are out of view

[lunatic]

Sorry, I can't believe this :/
There must be a workaround.

Your solution is not secure, cause your solution depends on the number of items I've got in the listview and I don't know how many items in the listview are going to be. 100? 1000? 10000?

[mbrasser]

[quote author="lunatic" date="1294245851"]So what is the workaround? Cause every time if the delegate-model is out of view the state is set to the default state.
[/quote]

The only workaround I know of is to save the state data to the model. For example:

@import Qt 4.7

Rectangle {
width: 200
height: 200
ListModel {
id: myModel
ListElement { label: "Item 1"; checked: false }
ListElement { label: "Item 2"; checked: false }
ListElement { label: "Item 3"; checked: false }
ListElement { label: "Item 4"; checked: false }
ListElement { label: "Item 5"; checked: false }
ListElement { label: "Item 6"; checked: false }
ListElement { label: "Item 7"; checked: false }
ListElement { label: "Item 8"; checked: false }
ListElement { label: "Item 9"; checked: false }
ListElement { label: "Item 10"; checked: false }
ListElement { label: "Item 11"; checked: false }
ListElement { label: "Item 12"; checked: false }
ListElement { label: "Item 13"; checked: false }
ListElement { label: "Item 14"; checked: false }
ListElement { label: "Item 15"; checked: false }
ListElement { label: "Item 16"; checked: false }
ListElement { label: "Item 17"; checked: false }
ListElement { label: "Item 18"; checked: false }
ListElement { label: "Item 19"; checked: false }
ListElement { label: "Item 20"; checked: false }
}

ListView {
    anchors.fill: parent
    model: myModel
    delegate: Text {
        id: txt
        text: label

        MouseArea {
            anchors.fill: parent
            onClicked: myModel.setProperty(index, "checked", !checked)
        }

        states: State {
            name: "checked"
            when: checked
            PropertyChanges {
                target: txt
                color: "red"
            }
        }
    }
}

}@

In this case clicking on the text will make it red, and the text will remain red even after it has gone out of view and come back in again.

Maybe in future versions we can add a way to mark list items as "in use" so they aren't deleted (this is already the case for one special item -- the currentItem).

Regards,
Michael

[lunatic]

hahaha nice joke. I knew it, that somebody would write this solution :D

OK, so the feature isn't implemented yet.

thanks!

[Kxyu]

[quote author="lunatic" date="1294269195"]
Your solution is not secure, cause your solution depends on the number of items I've got in the listview and I don't know how many items in the listview are going to be. 100? 1000? 10000?
[/quote]

Yeah, it's kind of a trick, not a serious solution. still it works - and how about
@
cacheBuffer:model.count*delegate.height
@

or that instead of ListView

@

Flickable{

Column{
Repeater{
model:
delegate:

}
}

}

@

you can add all ListView functionality you need to this solution yourself, like snapping, highlights etc, but all delegates will be static

[lunatic]

Yeah, that's a beautiful solution! (the second one)
thanks kxyu!

[DenisKormalev]

lunatic, I'll suggest to use solution provided by mbrasser. It will work much better than storing all delegates in memory (especially if you will have a lot of elements in your list). Just store some flags in model that will define needed state for this listelement and use them in State elements. It will just work.