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!