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