Home · All Classes · All Functions · Overviews

QML Package Element Reference

Package provides a collection of named items More...

Detailed Description

The Package class is currently used in conjunction with VisualDataModel to enable delegates with a shared context to be provided to multiple views.

Any item within a Package may be assigned a name via the Package.name attached property.

The example below creates a Package containing two named items; list and grid. The third element in the package is parented to whichever delegate it should appear in. This allows an item to move between views.

 Package {
     Text { id: listDelegate; width: 200; height: 25; text: "Empty"; Package.name: "list" }
     Text { id: gridDelegate; width: 100; height: 50; text: "Empty"; Package.name: "grid" }

     Rectangle {
         id: wrapper
         width: 200; height: 25
         color: "lightsteelblue"
         Text { text: display; anchors.centerIn: parent }
         MouseRegion {
             anchors.fill: parent
             onClicked: {
                 if (wrapper.state == "inList")
                     wrapper.state = "inGrid";
                 else
                     wrapper.state = "inList";
             }
         }
         state: "inList"
         states: [
             State {
                 name: 'inList'
                 ParentChange { target: wrapper; parent: listDelegate }
             },
             State {
                 name: 'inGrid'
                 ParentChange { target: wrapper; parent: gridDelegate }
                 PropertyChanges { target: wrapper; x: 0; y: 0; width: gridDelegate.width; height: gridDelegate.height }
             }
         ]
         transitions: [
             Transition {
                 SequentialAnimation {
                     ParentAction { target: wrapper }
                     NumberAnimation { targets: wrapper; properties: 'x,y,width,height'; duration: 300 }
                 }
             }
         ]
     }
 }

These named items are used as the delegates by the two views who reference the special VisualDataModel.parts property to select a model which provides the chosen delegate.

     VisualDataModel {
         id: visualModel
         delegate: Delegate {}
         model: myModel
     }

     ListView {
         width: 200; height:200
         model: visualModel.parts.list
     }
     GridView {
         x: 200; width: 200; height:200
         cellHeight: 50
         model: visualModel.parts.grid
     }


Copyright © 2010 Nokia Corporation and/or its subsidiary(-ies) Trademarks
Qt 4.7.0