Clickable List View elements

Mehrotra

Hello everyone!!
Can we make the elements of ListView or for that GridView and PathView clickable to produce animation to switch to other qmls. Like say if i have 3 elements in ListView say abc def ghi then when i click on abc def and ghi swishes by to open a different QML linked to abc on clicking. If yes, then how??

task_struct

Hello,

First in your delegate element use "MouseArea":http://doc.qt.nokia.com/4.7-snapshot/qml-mousearea.html stretched to the size of delegate.

Than onClicked implement logic to show new qml file. You can use "Loader":http://doc.qt.nokia.com/4.7-snapshot/qml-loader.html for example.

Mehrotra

Won't that just restrict the usage of all the elements having the same QMLs being opened when clicked on.

task_struct

Delegate should know which qml file to open depending on index role for example. Or model can provide that information.

Mehrotra

I'll elaborate a bit on what i a planning to do. I am supposed to create a lot of menus with different amount of options on the menus. So i created a generic QML containing the delegate and the list view and then from other QML put in the model to get the desired results. Since every menu has the same layout but there are additional features also available except on the contents of the menu this works for me. Now i am having problems linking the different QMLs of the menus.

I tried giving another variable in the ListElement for a signal but that generates an error of cannot use script value as property.

task_struct

If all menu items are defined in static ListModel( they don't change during runtime ), you can add one more role to ListElement that contain qml file name.

Something like this:
@
ListModel {
ListElement {
name: "Menu1"
qmlFile: "QmlFile1.qml"
}

ListElement {
name: "Menu2"
qmlFile: "QmlFile2.qml"
}
.....
}
@

and than in you delegate:

@
onClicked: { yourLoaderId.source = qmlFile }
@

If you want to use a function in ListModel, see "this example":http://developer.qt.nokia.com/wiki/Qt_Quick_Carousel#70b4903abcb62ace84264ad0443ae759

Mehrotra

Ok i am not defining all the menus in one list model. Basically through the generic delegate and generic list view i am using the model everytime i want to make the menus. The code is to the generic delegate and list view is:

@
Rectangle{
...
Component{
..
Image{
..
}
}

    ListView{
          model:image_model 
          ...
    }

}
@

The name of the file is Buttons.qml
Then there is another file like HomeMenu.qml that has the following code:

@
Buttons{
...
ListView{
ListModel{
id:image_model ;
...
}
}
}
@

What i want is the animate the current menu out of the screen and a new window pops open according to the element clicked of the ListElement.

And what do you mean when you say static ListModel is there a dynamic way of doing it as well??

[EDIT: code formatting, please wrap in @-tags, Volker]

Mehrotra

And thank you so much for your replies every reply is like so helpful. Thanks a lot!!

task_struct

To animate menu out of screen you can define animation in it and when menu is clicked, start animation.

For pop up you can use tje same approach, and start animation on
@Component.onCompleted:@ or something like this in your windown root item:

@
NumberAnimation on scale { from: 0; to: 1; duration: 500 }
@

To dynamicly change ListModel see it's "methods":http://doc.qt.nokia.com/4.7-snapshot/qml-listmodel.html#append-method