1 import Qt 4.7

     2 

     3 Rectangle {

     4     id: root

     5     width: 200

     6     height: 200

     7     color: "black"

     8 

     9     VisualDataModel {

    10         id: model

    11         model: ListModel {

    12             ListElement { itemColor: "red" }

    13             ListElement { itemColor: "green" }

    14             ListElement { itemColor: "blue" }

    15             ListElement { itemColor: "orange" }

    16             ListElement { itemColor: "purple" }

    17             ListElement { itemColor: "yellow" }

    18             ListElement { itemColor: "slategrey" }

    19             ListElement { itemColor: "cyan" }

    20             ListElement { itemColor: "red" }

    21             ListElement { itemColor: "green" }

    22             ListElement { itemColor: "blue" }

    23             ListElement { itemColor: "orange" }

    24             ListElement { itemColor: "purple" }

    25             ListElement { itemColor: "yellow" }

    26             ListElement { itemColor: "slategrey" }

    27             ListElement { itemColor: "cyan" }

    28         }

    29         delegate: Package {

    30             Rectangle {

    31                 id: listItem; Package.name: "list"; width:root.width/2; height: 50; color: "transparent"; border.color: "white"

    32                 MouseArea {

    33                     anchors.fill: parent

    34                     onClicked: myState.state = myState.state == "list" ? "grid" : "list"

    35                 }

    36             }

    37             Rectangle {

    38                 id: gridItem; Package.name: "grid"; width:50; height: 50; color: "transparent"; border.color: "white"

    39                 MouseArea {

    40                     anchors.fill: parent

    41                     onClicked: myState.state = myState.state == "list" ? "grid" : "list"

    42                 }

    43             }

    44             Rectangle { id: myContent; width:50; height: 50; color: itemColor }

    45 

    46             StateGroup {

    47                 id: myState

    48                 state: "list"

    49                 states: [

    50                     State {

    51                         name: "list"

    52                         ParentChange { target: myContent; parent: listItem }

    53                         PropertyChanges { target: myContent; x: 0; y: 0; width: listItem.width }

    54                     },

    55                     State {

    56                         name: "grid"

    57                         ParentChange { target: myContent; parent: gridItem }

    58                         PropertyChanges { target: myContent; x: 0; y: 0; width: gridItem.width }

    59                     }

    60                 ]

    61 

    62                 transitions: [

    63                     Transition {

    64                         from: "*"; to: "*"

    65                         SequentialAnimation {

    66                             ParentAnimation{

    67                                 NumberAnimation { properties: "x,y,width"; easing.type: "InOutQuad" }

    68                             }

    69                         }

    70                     }

    71                 ]

    72             }

    73         }

    74     }

    75 

    76     ListView {

    77         width: parent.width/2

    78         height: parent.height

    79         model: model.parts.list

    80     }

    81 

    82     GridView {

    83         x: parent.width/2

    84         width: parent.width/2

    85         cellWidth: 50

    86         cellHeight: 50

    87         height: parent.height

    88         model: model.parts.grid

    89     }

    90 }