tests/auto/declarative/qmlvisual/Package_Views/packageviews.qml

   1 import QtQuick 1.0
   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         }
  21         delegate: Package {
  22             Rectangle {
  23                 id: listItem; Package.name: "list"; width:root.width/2; height: 25; color: "transparent"; border.color: "white"
  24                 MouseArea {
  25                     anchors.fill: parent
  26                     onClicked: myState.state = myState.state == "list" ? "grid" : "list"
  27                 }
  28             }
  29             Rectangle {
  30                 id: gridItem; Package.name: "grid"; width:50; height: 50; color: "transparent"; border.color: "white"
  31                 MouseArea {
  32                     anchors.fill: parent
  33                     onClicked: myState.state = myState.state == "list" ? "grid" : "list"
  34                 }
  35             }
  36             Rectangle { id: myContent; width:50; height: 50; color: itemColor }
  37
  38             StateGroup {
  39                 id: myState
  40                 state: "list"
  41                 states: [
  42                     State {
  43                         name: "list"
  44                         ParentChange { target: myContent; parent: listItem }
  45                         PropertyChanges { target: myContent; x: 0; y: 0; width: listItem.width; height: listItem.height }
  46                     },
  47                     State {
  48                         name: "grid"
  49                         ParentChange { target: myContent; parent: gridItem }
  50                         PropertyChanges { target: myContent; x: 0; y: 0; width: gridItem.width; height: gridItem.height }
  51                     }
  52                 ]
  53
  54                 transitions: [
  55                     Transition {
  56                         from: "*"; to: "*"
  57                         SequentialAnimation {
  58                             ParentAnimation{
  59                                 NumberAnimation { properties: "x,y,width,height"; easing.type: "InOutQuad" }
  60                             }
  61                         }
  62                     }
  63                 ]
  64             }
  65         }
  66     }
  67
  68     ListView {
  69         width: parent.width/2
  70         height: parent.height
  71         model: model.parts.list
  72     }
  73
  74     GridView {
  75         x: parent.width/2
  76         width: parent.width/2
  77         cellWidth: 50
  78         cellHeight: 50
  79         height: parent.height
  80         model: model.parts.grid
  81     }
  82 }