Drawer QML Type

Seitenleiste, die durch eine Wischgeste geöffnet und geschlossen werden kann. Mehr...

• Liste aller Elemente, einschließlich der vererbten Elemente

Eigenschaften

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

Ausführliche Beschreibung

„Drawer“ bietet ein durch Wischen bedienbares Seitenpanel, ähnlich denen, die häufig in Touch-Oberflächen verwendet werden, um eine zentrale Stelle für die Navigation bereitzustellen.

„Drawer“ kann an einem der vier Ränder des Inhaltselements positioniert werden. Der oben gezeigte „Drawer“ ist am linken Rand des Fensters positioniert. Der „Drawer“ wird dann geöffnet, indem man ihn vom linken Rand des Fensters „herauszieht “.

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

Drawer ist eine spezielle Art von Popup, das sich an einem der Fenster edges befindet. Standardmäßig ordnet sich Drawer dem Fenster overlay als übergeordnetes Element zu und arbeitet daher mit Fensterkoordinaten. Es ist auch möglich, die „ parent “ manuell auf einen anderen Wert zu setzen, damit der Drawer in einem bestimmten Koordinatenraum arbeitet.

Drawer kann so konfiguriert werden, dass es nur einen Teil seines Fensterrandes abdeckt. Das folgende Beispiel veranschaulicht, wie Drawer so positioniert werden kann, dass es unterhalb einer Fensterkopfzeile 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 vom Drawer sichtbar ist, und zwar als Wert zwischen „ 0.0 “ und „ 1.0 “. Es ist nicht möglich, die x-Koordinate (oder horizontalen Ränder) eines Drawers am linken oder rechten Fensterrand oder die y-Koordinate (oder vertikalen Ränder) eines Drawers am oberen oder unteren Fensterrand festzulegen.

In der Abbildung oben wird der Inhalt der Anwendung über den Bildschirm „verschoben “. Dies wird durch eine Verschiebung des Inhalts 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 der Inhalt der Anwendung beim Öffnen des Drawers an seiner Position bleiben soll, wenden Sie keine Verschiebung an.

„Drawer“ kann als nicht schließbares, dauerhaftes Seitenpanel konfiguriert werden, indem die Eigenschaften „ non-modal “ und „ non-interactive “ gesetzt werden. Weitere Details findest du im Beispiel in der Galerie.

Siehe auch „ SwipeView“ , „Anpassen von Drawer“, „Navigationssteuerelemente“ und „Popup-Steuerelemente“.

Dokumentation zu den Eigenschaften

dragMargin : real

Diese Eigenschaft gibt den Abstand vom Bildschirmrand an, innerhalb dessen Drag-Aktionen das Menü öffnen. Wenn der Wert auf „ 0 “ oder weniger gesetzt wird, wird das Öffnen des Menüs durch Ziehen verhindert.

Der Standardwert ist „ Application.styleHints.startDragDistance “.

Siehe auch „ interactive “.

edge : enumeration

Diese Eigenschaft gibt die Kante des Fensters an, an der sich die Schublade öffnet. Die zulässigen Werte sind:

interactive : bool [since QtQuick.Controls 2.2 (Qt 5.9)]

Diese Eigenschaft gibt an, ob die Schublade interaktiv ist. Eine nicht-interaktive Schublade reagiert nicht auf Wischgesten.

Der Standardwert ist „ true “.

Diese Eigenschaft wurde in QtQuick.Controls 2.2 (Qt 5.9) eingeführt.

Siehe auch „ dragMargin “.

position : real

Diese Eigenschaft gibt die Position der Schublade relativ zu ihrer Endposition an. Das heißt, die Position lautet 0.0, wenn die Schublade vollständig geschlossen ist, und 1.0, wenn sie vollständig geöffnet ist.