A drawer opened from the left or right edge of the screen with custom content More...

Import Statement: import VPlayApps 1.0





Detailed Description

This is a customizable container which can be slided in from the edge of the screen. It can host any QML items as children.

The AppDrawer should be placed inside a screen-filling container. It always has the same height as its parent. The width of the drawer is 240dp per default and can be changed manually. It should not be too small or too large, probably somewhere between 25% and 75% of the width of its parent view.

Example Code

To include an AppDrawer for arbitrary content in your application, the following code can be used. If the drawer should be used for navigating between pages, consider using Navigation instead.

 Page {
   AppDrawer {
     //all items inside AppDrawer will be placed in the drawer area

     id: drawer

     z: 1 //put drawer on top of other content

     Rectangle { //background for drawer
       anchors.fill: parent
       color: "white"

     AppButton {
       anchors.centerIn: parent
       text: "Test"
       onClicked: {
         testTxt.text = "Button in drawer Clicked"
   } //end of AppDrawer

   AppText {
     id: testTxt
     anchors.centerIn: parent
     font.pixelSize: sp(18)
     text: "Swipe from left to open drawer"

   AppButton {
     text: "Open drawer manually" testTxt.bottom
     anchors.horizontalCenter: parent.horizontalCenter

Property Documentation

[default] contentItems : list<Item>

The items to be placed inside the AppDrawer's content view. As this is the default property, all the drawer's children are automatically placed inside the content view.

drawerPosition : int

Sets the screen position of the drawer, can be either drawerPositionLeft or drawerPositionRight.

[read-only] isOpen : bool

True, if the drawer is currently open.

keepOpen : bool

Set this to true, to have the drawer locked in an open state. It can not be closed by the user or the close() method.

The drawer automatically opens, when keepOpen gets set to true.

The content will still be enabled while the drawer is open.

The default value is false.

slideInDist : real

The width of the touch area from the edge of the screen, from which the drawer can be slided in.

For example, if drawerPosition is set to drawerPositionLeft, and slideInDist is set to 20dp, the MouseArea to drag in the drawer from the left side of the screen is 20dp wide.

The default value is 36dp.

Signal Documentation


Called when the drawer closes, either manually via the close() or toggle() method or by user interaction.


Called when the drawer opens, either manually via the open() or toggle() method or by user interaction.

Method Documentation

bool close()

Closes the drawer. If it was not open, does nothing.

Returns true, if the drawer has been closed. Returns false, if the drawer is disabled, or if it was already closed.

bool open()

Opens the drawer. If it was already open, does nothing.

Returns true, if the drawer has been opened. Returns false, if the drawer is disabled, or if it was already opened.

void toggle()

Closes the drawer if it is open, otherwise, opens it.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
create apps
create games
cross platform
native performance
3rd party services
game network
level editor
easiest to learn
biggest time saving
best support