QML control type: drawer

One 、 describe

Drawer Provide a side panel that can be opened and closed using a sliding gesture . Inherited from  Popup.

Drawer It can be opened from up, down, left and right .

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    id: window
    visible: true

    Drawer {
        id: drawer
        width: 0.66 * window.width
        height: window.height

        Label {
            text: "Content goes here!"
            anchors.centerIn: parent
        }
    }
}

take Drawer Navigate to display below the window title ：

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts 1.12

ApplicationWindow {
    id: window
    visible: true

    header: ToolBar
    {
        RowLayout {
          anchors.fill: parent
          ToolButton {
              text: " test 1"
          }
          ToolButton {
              text: " test 2"
          }
        }
    }

    Drawer {
        y: header.height
        width: window.width * 0.6
        height: window.height - header.height

        Label {
            text: "Content goes here!"
            anchors.centerIn: parent
        }
    }
}

position Attribute determination Drawer Visibility of , The value is between 0.0 and 1.0 Between . The following code uses an and Drawer Of the same rank Label To demonstrate “Label By Drawer Push ” The effect of ：

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    id: window
    width: 200
    height: 228
    visible: true

    Drawer {
        id: drawer
        width: 0.66 * window.width
        height: window.height
    }

    Label {
        id: content

        text: "Aa"
        font.pixelSize: 96
        anchors.fill: parent
        verticalAlignment: Label.AlignVCenter
        horizontalAlignment: Label.AlignHCenter

        transform: Translate {    //x The law of attribute change 
            x: drawer.position * content.width * 0.33
        }
    }
}

 

Two 、 Customize Drawer Example

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    id: window
    visible: true

    Drawer {
        id: drawer
        width: 0.66 * window.width
        height: window.height

        background: Rectangle {
            color: "#128bf1"
            Rectangle {
                x: parent.width - 3
                width: 3
                height: parent.height
                color: "#ff0000"
            }
        }

        Label {
            text: "Content goes here!"
            anchors.centerIn: parent
        }
    }
}

3、 ... and 、 Attribute members

1、dragMargin : real

Distance from the edge of the screen , Dragging within this distance will open Drawer. Set to Less than or equal to 0 Opening by dragging... Can be disabled Drawer.

The default value is Qt.styleHints.startDragDistance.

2、edge : enumeration

open Drawer Window edge of .

• Qt.TopEdge： The upper edge .
• Qt.LeftEdge： Left edge （ Default ）.
• Qt.RightEdge： Right edge .
• Qt.BottomEdge： Bottom edge .

3、interactive : bool

Drawer Is it interactive . Non interactive does not react to sliding . The default is true.

4、position : real

Drawer Position relative to its final destination . When fully closed, the position is 0.0, When fully opened, the position is 1.0.