Moving a ToolBar in

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.

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:

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!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s