In this example I will move a toolbar into the main rectangle. The toolbar get’s hidden when the user clicks outside the toolbar.
We create an outer rectangle our “screen” and an inner rectangle which is initially hidden and located outside the bottom of the screen (y:200). Both rectangles have a mouse region attached, to control user interaction.
So when we start it, the screen looks like a black panel.
Image may be NSFW.
Clik here to view.
import Qt 4.6
Rectangle {
width: 200
height: 200
color: "black"
property bool on: false
MouseRegion { id: region; anchors.fill: parent; onClicked: toolbar.toggle()}
Rectangle {
id: toolbar
color: "gray"
x: 20; y: 200;
width: 160; height: 48
opacity: 0
function toggle() {
on = on==true?false:true
}
states : State {
name: "shown"
when: on
PropertyChanges{target:toolbar; y: 150; opacity: 1}
}
transitions: [
Transition {
NumberAnimation { matchProperties: "y,opacity"; duration: 500 }
}
]
MouseRegion { anchors.fill: parent; onClicked: console.log("toolbar clicked")}
}
}
When the user clicks on the MouseRegion region the toolbar is toggled and the on property is changed. A change in the on property will result into a state change, which contains the properties for a visible toolbar (y, opacity). The state transition is animated via a NumberAnimation.
The screen with visible toolbar looks like this:
Image may be NSFW.
Clik here to view.
Another click on the MouseRegion region will hide the toolbar again.
Note: It’s important to have the larger mouse region first. Siblings declared later in a QML file are considered to be on top of those declared earlier. So order of declaration is important!
Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
