examples/declarative/animation/states/states.qml
changeset 37 758a864f9613
parent 30 5dc02b23752f
equal deleted inserted replaced
36:ef0373b55136 37:758a864f9613
    46     color: "#343434"
    46     color: "#343434"
    47 
    47 
    48     Image { 
    48     Image { 
    49         id: userIcon
    49         id: userIcon
    50         x: topLeftRect.x; y: topLeftRect.y
    50         x: topLeftRect.x; y: topLeftRect.y
    51         source: "user.png"
    51         source: "qt-logo.png"
    52     }
    52     }
    53 
    53 
    54     Rectangle {
    54     Rectangle {
    55         id: topLeftRect
    55         id: topLeftRect
    56 
    56 
    57         anchors { left: parent.left; top: parent.top; leftMargin: 10; topMargin: 20 }
    57         anchors { left: parent.left; top: parent.top; leftMargin: 10; topMargin: 20 }
    58         width: 64; height: 64
    58         width: 46; height: 54
    59         color: "Transparent"; border.color: "Gray"; radius: 6
    59         color: "Transparent"; border.color: "Gray"; radius: 6
    60 
    60 
    61         // Clicking in here sets the state to the default state, returning the image to
    61         // Clicking in here sets the state to the default state, returning the image to
    62         // its initial position
    62         // its initial position
    63         MouseArea { anchors.fill: parent; onClicked: page.state = '' }
    63         MouseArea { anchors.fill: parent; onClicked: page.state = '' }
    65 
    65 
    66     Rectangle {
    66     Rectangle {
    67         id: middleRightRect
    67         id: middleRightRect
    68 
    68 
    69         anchors { right: parent.right; verticalCenter: parent.verticalCenter; rightMargin: 20 }
    69         anchors { right: parent.right; verticalCenter: parent.verticalCenter; rightMargin: 20 }
    70         width: 64; height: 64
    70         width: 46; height: 54
    71         color: "Transparent"; border.color: "Gray"; radius: 6
    71         color: "Transparent"; border.color: "Gray"; radius: 6
    72 
    72 
    73         // Clicking in here sets the state to 'middleRight'
    73         // Clicking in here sets the state to 'middleRight'
    74         MouseArea { anchors.fill: parent; onClicked: page.state = 'middleRight' }
    74         MouseArea { anchors.fill: parent; onClicked: page.state = 'middleRight' }
    75     }
    75     }
    76 
    76 
    77     Rectangle {
    77     Rectangle {
    78         id: bottomLeftRect
    78         id: bottomLeftRect
    79 
    79 
    80         anchors { left: parent.left; bottom: parent.bottom; leftMargin: 10; bottomMargin: 20 }
    80         anchors { left: parent.left; bottom: parent.bottom; leftMargin: 10; bottomMargin: 20 }
    81         width: 64; height: 64
    81         width: 46; height: 54
    82         color: "Transparent"; border.color: "Gray"; radius: 6
    82         color: "Transparent"; border.color: "Gray"; radius: 6
    83 
    83 
    84         // Clicking in here sets the state to 'bottomLeft'
    84         // Clicking in here sets the state to 'bottomLeft'
    85         MouseArea { anchors.fill: parent; onClicked: page.state = 'bottomLeft' }
    85         MouseArea { anchors.fill: parent; onClicked: page.state = 'bottomLeft' }
    86     }
    86     }