Drawer QML Type

Seitenpanel, das mit einer Wischgeste geöffnet und geschlossen werden kann. Mehr...

• Liste aller Mitglieder, einschließlich geerbter Mitglieder

Eigenschaften

• dragMargin : real
• edge : enumeration
• interactive : bool (since QtQuick.Controls 2.2 (Qt 5.9))
• position : real

Ausführliche Beschreibung

Drawer bietet ein auf Streichen basierendes Seitenpanel, ähnlich denen, die oft in Touch-Oberflächen verwendet werden, um einen zentralen Ort für die Navigation zu bieten.

Die Schublade kann an jedem der vier Ränder des Inhaltselements positioniert werden. Die obige Schublade befindet sich am linken Rand des Fensters. Die Schublade wird geöffnet, indem sie vom linken Rand des Fensters weggezogen wird.

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
        }
    }
}

Die Schublade ist ein spezielles Popup-Fenster, das sich in einem der Fenster edges befindet. Standardmäßig orientiert sich die Schublade am Fenster overlay und arbeitet daher mit Fensterkoordinaten. Es ist auch möglich, parent manuell auf einen anderen Wert zu setzen, damit die Schublade in einem bestimmten Koordinatenbereich arbeitet.

Die Schublade kann so konfiguriert werden, dass sie nur einen Teil ihres Fensterrandes abdeckt. Das folgende Beispiel zeigt, wie die Schublade so positioniert werden kann, dass sie unterhalb einer Fensterüberschrift erscheint:

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    id: window
    visible: true

    header: ToolBar { }

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

Die Eigenschaft position bestimmt, wie viel von der Schublade sichtbar ist, als Wert zwischen 0.0 und 1.0. Es ist nicht möglich, die x-Koordinate (oder horizontale Ränder) einer Schublade am linken oder rechten Fensterrand oder die y-Koordinate (oder vertikale Ränder) einer Schublade am oberen oder unteren Fensterrand festzulegen.

In der obigen Abbildung wird der Inhalt der Anwendung über den Bildschirm "geschoben". Dies wird durch die Anwendung einer Verschiebung auf den Inhalt erreicht:

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: drawer.position * content.width * 0.33
        }
    }
}

Wenn Sie möchten, dass der Inhalt der Anwendung dort bleibt, wo er ist, wenn die Schublade geöffnet wird, wenden Sie keine Verschiebung an.

Die Schublade kann als nicht verschließbares, dauerhaftes Seitenpanel konfiguriert werden, indem Sie die Schublade non-modal und non-interactive machen. Weitere Einzelheiten finden Sie im Galerie-Beispiel.

Siehe auch SwipeView, Schublade anpassen, Navigationssteuerungen und Popup-Steuerungen.

Eigenschaft Dokumentation