Drawer QML Type

Panneau latéral pouvant être ouvert et fermé d'un simple geste. Plus d'informations...

• Liste de tous les membres, y compris les membres hérités

Propriétés

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

Description détaillée

Le tiroir fournit un panneau latéral basé sur le glissement, similaire à ceux souvent utilisés dans les interfaces tactiles pour fournir un emplacement central pour la navigation.

Le tiroir peut être positionné sur l'un des quatre bords de l'élément de contenu. Le tiroir ci-dessus est positionné contre le bord gauche de la fenêtre. Le tiroir est ensuite ouvert en le faisant "glisser" depuis le bord gauche de la fenêtre.

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

Le tiroir est un type spécial de fenêtre contextuelle qui se trouve sur l'un des bords de la fenêtre edges. Par défaut, Drawer se re-parente à la fenêtre overlay, et fonctionne donc sur les coordonnées de la fenêtre. Il est également possible d'attribuer manuellement une autre valeur à la fenêtre parent pour que le tiroir fonctionne dans un espace de coordonnées spécifique.

Le tiroir peut être configuré pour ne couvrir qu'une partie du bord de sa fenêtre. L'exemple suivant illustre comment le tiroir peut être positionné pour apparaître sous l'en-tête d'une fenêtre :

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

La propriété position détermine la partie visible du tiroir, sous la forme d'une valeur comprise entre 0.0 et 1.0. Il n'est pas possible de définir les coordonnées x (ou marges horizontales) d'un tiroir sur le bord gauche ou droit de la fenêtre, ni les coordonnées y (ou marges verticales) d'un tiroir sur le bord supérieur ou inférieur de la fenêtre.

Dans l'image ci-dessus, le contenu de l'application est "poussé" sur l'écran. Pour ce faire, une translation est appliquée au contenu :

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

Si vous souhaitez que le contenu de l'application reste à l'endroit où il se trouve lorsque le tiroir est ouvert, n'appliquez pas de translation.

Le tiroir peut être configuré comme un panneau latéral persistant non refermable en rendant le tiroir non-modal et non-interactive. Voir l'exemple de la galerie pour plus de détails.

Voir également SwipeView, Personnaliser le tiroir, Contrôles de navigation et Contrôles contextuels.

Documentation sur les propriétés

dragMargin : real

Cette propriété définit la distance par rapport au bord de l'écran à laquelle les actions de glisser-déposer ouvriront le tiroir. Si la valeur est inférieure ou égale à 0, le tiroir ne s'ouvrira pas par glissement.

La valeur par défaut est Application.styleHints.startDragDistance.

Voir également interactive.

edge : enumeration

Cette propriété définit le bord de la fenêtre à partir duquel le tiroir s'ouvrira. Les valeurs acceptables sont les suivantes

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

Cette propriété indique si le tiroir est interactif. Un tiroir non interactif ne réagit pas aux glissements.

La valeur par défaut est true.

Cette propriété a été introduite dans QtQuick.Controls 2.2 (Qt 5.9).

Voir également dragMargin.

position : real

Cette propriété indique la position du tiroir par rapport à sa destination finale. En d'autres termes, la position sera 0.0 lorsque le tiroir est complètement fermé et 1.0 lorsqu'il est complètement ouvert.