Drawer QML Type

Panneau latéral pouvant être ouvert et fermé d'un simple glissement du doigt. En savoir plus...

• 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

Drawer propose un panneau latéral accessible par glissement, similaire à ceux souvent utilisés dans les interfaces tactiles pour offrir un emplacement centralisé dédié à la navigation.

Drawer 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. Il s'ouvre alors 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
        }
    }
}

Drawer est un type particulier de fenêtre contextuelle qui réside à l’un des bords de la fenêtre edges. Par défaut, Drawer se rattache à la fenêtre overlay et fonctionne donc selon les coordonnées de la fenêtre. Il est également possible de définir manuellement la propriété parent sur une autre valeur afin que le tiroir fonctionne dans un espace de coordonnées spécifique.

Drawer peut être configuré pour ne couvrir qu’une partie du bord de sa fenêtre. L’exemple suivant illustre comment positionner Drawer pour qu’il apparaisse 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 la coordonnée x (ou les marges horizontales) d’un tiroir au niveau du bord gauche ou droit de la fenêtre, ni la coordonnée y (ou les marges verticales) d’un tiroir au niveau du bord supérieur ou inférieur de la fenêtre.

Sur l’image ci-dessus, le contenu de l’application est « repoussé » sur l’écran. Pour ce faire, on applique une translation 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 à sa place lorsque le tiroir est ouvert, n'appliquez pas de translation.

Drawer peut être configuré comme un panneau latéral persistant non fermable en définissant les paramètres suivants pour Drawer : non-modal et non-interactive. Consultez l’exemple de la Galerie pour plus de détails.

Voir également SwipeView, Personnalisation de Drawer, Commandes de navigation et Commandes contextuelles.

Documentation sur les propriétés

dragMargin : real

Cette propriété définit la distance par rapport au bord de l'écran à l'intérieur de laquelle les actions de glisser-déposer ouvrent le menu coulissant. En définissant cette valeur sur 0 ou moins, vous empêchez l'ouverture du menu coulissant par glisser-déposer.

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 autorisées 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 position finale. Autrement dit, la position sera 0.0 lorsque le tiroir est complètement fermé, et 1.0 lorsqu'il est complètement ouvert.