Clickable List View elements



  • 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??



  • 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.



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



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



  • 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.



  • 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



  • 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]



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



  • 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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.