SplitView QML Type

Affiche les éléments avec un séparateur déplaçable entre chacun d'eux. En savoir plus...

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

Propriétés

• handle : Component
• orientation : enumeration
• resizing : bool

Propriétés associées

• fillHeight : bool
• fillWidth : bool
• maximumHeight : real
• maximumWidth : real
• minimumHeight : real
• minimumWidth : real
• preferredHeight : real
• preferredWidth : real
• view : SplitView

Méthodes

• bool restoreState(state)
• var saveState()

Description détaillée

SplitView est un contrôle qui dispose les éléments horizontalement ou verticalement, avec un séparateur déplaçable entre chaque élément.

SplitView prend en charge les propriétés associées suivantes sur les éléments qu'il gère :

• SplitView.minimumWidth
• SplitView.minimumHeight
• SplitView.preferredWidth
• SplitView.preferredHeight
• SplitView.maximumWidth
• SplitView.maximumHeight
• SplitView.fillWidth (vrai s'il n'y a qu'un seul enfant)
• SplitView.fillHeight (vrai s'il n'y a qu'un seul enfant)

De plus, chaque poignée dispose des propriétés associées en lecture seule suivantes :

• SplitHandle.hovered
• SplitHandle.pressed

La taille préférée des éléments dans une SplitView peut être spécifiée via implicitWidth et implicitHeight ou SplitView.preferredWidth et SplitView.preferredHeight:

SplitView {
    anchors.fill: parent

    Item {
        SplitView.preferredWidth: 50
    }

    // ...
}

Pour une SplitView horizontale, il n’est pas nécessaire de spécifier la hauteur préférée de chaque élément, car ceux-ci seront redimensionnés en fonction de la hauteur de la vue. Le principe inverse s’applique aux vues verticales.

Lorsqu’une poignée de division est déplacée, la propriété « SplitView.preferredWidth » ou « SplitView.preferredHeight » est écrasée, en fonction de l’ orientation de la vue.

Pour limiter la taille des éléments dans une vue horizontale, utilisez les propriétés suivantes :

SplitView {
    anchors.fill: parent

    Item {
        SplitView.minimumWidth: 25
        SplitView.preferredWidth: 50
        SplitView.maximumWidth: 100
    }

    // ...
}

Pour limiter la taille des éléments dans une vue verticale, utilisez les propriétés suivantes :

SplitView {
    anchors.fill: parent
    orientation: Qt.Vertical

    Item {
        SplitView.minimumHeight: 25
        SplitView.preferredHeight: 50
        SplitView.maximumHeight: 100
    }

    // ...
}

Il y aura toujours un élément (l’élément de remplissage) dans la SplitView dont la propriété « SplitView.fillWidth » est définie sur « true » (ou « SplitView.fillHeight », si « orientation » est « Qt.Vertical »). Cela signifie que cet élément occupera tout l’espace restant une fois que les autres éléments auront été disposés. Par défaut, c’est le dernier enfant visible de la SplitView qui aura cette valeur, mais cela peut être modifié en définissant explicitement « fillWidth » sur « true » pour un autre élément.

Une poignée peut appartenir à l’élément situé soit à gauche ou en haut, soit à droite ou en bas :

• Si l’élément de remplissage se trouve à droite : la poignée appartient à l’élément de gauche.
• Si l’élément de remplissage se trouve à gauche : la poignée appartient à l’élément de droite.

Pour créer une SplitView avec trois éléments et laisser l’élément central disposer d’un espace supplémentaire, on peut procéder comme suit :

SplitView {
    anchors.fill: parent
    orientation: Qt.Horizontal

    Rectangle {
        implicitWidth: 200
        SplitView.maximumWidth: 400
        color: "lightblue"
        Label {
            text: "View 1"
            anchors.centerIn: parent
        }
    }
    Rectangle {
        id: centerItem
        SplitView.minimumWidth: 50
        SplitView.fillWidth: true
        color: "lightgray"
        Label {
            text: "View 2"
            anchors.centerIn: parent
        }
    }
    Rectangle {
        implicitWidth: 200
        color: "lightgreen"
        Label {
            text: "View 3"
            anchors.centerIn: parent
        }
    }
}

Sérialisation de l’état de SplitView

L'objectif principal de SplitView est de permettre aux utilisateurs de configurer facilement la taille de divers éléments de l'interface utilisateur. De plus, les tailles préférées de l'utilisateur doivent être mémorisées d'une session à l'autre. Pour ce faire, les valeurs des propriétés ` SplitView.preferredWidth ` et ` SplitView.preferredHeight ` peuvent être sérialisées à l'aide des fonctions ` saveState()` et ` restoreState()` :

import QtCore
import QtQuick.Controls

ApplicationWindow {
    // ...

    Component.onCompleted: splitView.restoreState(settings.splitView)
    Component.onDestruction: settings.splitView = splitView.saveState()

    Settings {
        id: settings
        property var splitView
    }

    SplitView {
        id: splitView
        // ...
    }
}

Il est également possible d’utiliser les fonctions value() et setValue() de Settings:

import QtCore
import QtQuick.Controls

ApplicationWindow {
    // ...

    Component.onCompleted: splitView.restoreState(settings.value("ui/splitview"))
    Component.onDestruction: settings.setValue("ui/splitview", splitView.saveState())

    Settings {
        id: settings
    }

    SplitView {
        id: splitView
        // ...
    }
}

Voir également SplitHandle, Personnalisation de SplitView et Contrôles de conteneur.

Documentation sur les propriétés

handle : Component

Cette propriété contient le composant « handle ».

Une instance de ce composant sera instanciée count - 1 fois, tant que count est supérieur à 1.

Le tableau suivant explique comment chaque poignée sera redimensionnée en fonction de l'orientation de la vue fractionnée :

Pour modifier la taille de la poignée pour les événements de souris et tactiles sans modifier sa taille visuelle, utilisez une containmentMask:

SplitView {
    id: splitView
    anchors.fill: parent

    handle: Rectangle {
        id: handleDelegate
        implicitWidth: 4
        implicitHeight: 4
        color: SplitHandle.pressed ? "#81e889"
            : (SplitHandle.hovered ? Qt.lighter("#c2f4c6", 1.1) : "#c2f4c6")

        containmentMask: Item {
            x: (handleDelegate.width - width) / 2
            width: 64
            height: splitView.height
        }
    }

    Rectangle {
        implicitWidth: 150
        color: "#444"
    }
    Rectangle {
        implicitWidth: 50
        color: "#666"
    }
}

Voir aussi Personnalisation deSplitView.

orientation : enumeration

Cette propriété définit l’orientation de l’ SplitView.

L'orientation détermine la disposition des éléments fractionnés :

Valeurs possibles :

resizing : bool [read-only]

Cette propriété prend la valeur « true » lorsque l'utilisateur redimensionne des éléments divisés en faisant glisser les poignées de séparation.

Documentation sur les propriétés associées

SplitView.fillHeight : bool [attached]

Cette propriété associée détermine si l'élément occupe l'espace restant dans la vue fractionnée une fois que tous les autres éléments ont été disposés.

Par défaut, le dernier enfant visible de la vue fractionnée remplit la vue, mais ce comportement peut être modifié en définissant explicitement la propriété « fillHeight » sur « true » pour un autre élément. Si plusieurs éléments ont la propriété « fillHeight » définie sur « true », c’est l’élément situé tout en haut qui remplit la vue.

La hauteur d’un élément divisé dont la propriété « fillHeight » est définie sur « true » reste toutefois limitée par ses propriétés « minimumHeight » et « maximumHeight ».

Voir également minimumHeight, preferredHeight, maximumHeight et fillWidth.

SplitView.fillWidth : bool [attached]

Cette propriété associée détermine si l'élément occupe l'espace restant dans la vue fractionnée une fois que tous les autres éléments ont été disposés.

Par défaut, le dernier enfant visible de la vue fractionnée remplit la vue, mais ce comportement peut être modifié en définissant explicitement la propriété « fillWidth » sur « true » pour un autre élément. Si plusieurs éléments ont la propriété « fillWidth » définie sur « true », c’est l’élément le plus à gauche qui remplit la vue.

La largeur d’un élément divisé dont la propriété « fillWidth » est définie sur « true » reste toutefois limitée par ses propriétés « minimumWidth » et « maximumWidth ».

Voir également minimumWidth, preferredWidth, maximumWidth et fillHeight.

SplitView.maximumHeight : real [attached]

Cette propriété associée contrôle la hauteur maximale de l'élément divisé. La valeur « preferredHeight » est comprise entre les valeurs « minimumHeight » et « maximumHeight ». Un élément divisé ne peut pas être déplacé pour dépasser sa hauteur « maximumHeight ».

La valeur par défaut est « Infinity ». Pour réinitialiser cette propriété à sa valeur par défaut, définissez-la sur « undefined ».

Voir également minimumHeight, preferredHeight, fillHeight et maximumWidth.

SplitView.maximumWidth : real [attached]

Cette propriété associée contrôle la largeur maximale de l'élément divisé. La valeur « preferredWidth » est comprise entre les valeurs « minimumWidth » et « maximumWidth ». Un élément divisé ne peut pas être déplacé pour dépasser sa largeur « maximumWidth ».

La valeur par défaut est Infinity. Pour rétablir la valeur par défaut de cette propriété, définissez-la sur undefined.

Voir également minimumWidth, preferredWidth, fillWidth et maximumHeight.

SplitView.minimumHeight : real [attached]

Cette propriété associée contrôle la hauteur minimale de l'élément divisé. La valeur « preferredHeight » est comprise entre « minimumHeight » et « maximumHeight ». Un élément divisé ne peut pas être déplacé pour devenir plus petit que sa valeur « minimumHeight ».

La valeur par défaut est « 0 ». Pour rétablir la valeur par défaut de cette propriété, définissez-la sur « undefined ».

Voir également maximumHeight, preferredHeight, fillHeight et minimumWidth.

SplitView.minimumWidth : real [attached]

Cette propriété associée contrôle la largeur minimale de l’élément divisé. La valeur « preferredWidth » est comprise entre « minimumWidth » et « maximumWidth ». Un élément divisé ne peut pas être déplacé pour devenir plus petit que sa « minimumWidth ».

La valeur par défaut est 0. Pour rétablir la valeur par défaut de cette propriété, définissez-la sur undefined.

Voir également maximumWidth, preferredWidth, fillWidth et minimumHeight.

SplitView.preferredHeight : real [attached]

Cette propriété associée permet de contrôler la hauteur préférée de l'élément divisé. La hauteur préférée sera utilisée comme taille de l'élément et sera comprise entre les valeurs minimumHeight et maximumHeight. Si la hauteur préférée n'est pas définie, la propriété implicitHeight de l'élément sera utilisée.

Lorsqu'un élément divisé est redimensionné, la propriété preferredHeight sera définie afin de refléter la nouvelle taille.

Par défaut, cette propriété n’est pas définie ; c’est donc la propriété « implicitHeight » qui est utilisée à la place. Pour rétablir la valeur par défaut de cette propriété, définissez-la sur « undefined ».

Voir également minimumHeight, maximumHeight, fillHeight et preferredWidth.

SplitView.preferredWidth : real [attached]

Cette propriété associée contrôle la largeur préférée de l'élément divisé. La largeur préférée sera utilisée comme taille de l'élément et sera comprise entre les valeurs ` minimumWidth ` et ` maximumWidth`. Si la largeur préférée n'est pas définie, la largeur « par défaut » de l'élément ( implicitWidth ) sera utilisée.

Lorsqu'un élément divisé est redimensionné, la propriété preferredWidth sera définie afin de refléter la nouvelle taille.

Par défaut, cette propriété n’est pas définie ; c’est donc la propriété « implicitWidth » qui sera utilisée à la place. Pour réinitialiser cette propriété à sa valeur par défaut, définissez-la sur « undefined ».

Voir également minimumWidth, maximumWidth, fillWidth et preferredHeight.

SplitView.view : SplitView [attached]

Cette propriété associée contient la vue fractionnée de l'élément auquel elle est associée, ou la valeur « null » si l'élément ne se trouve pas dans une vue fractionnée.

Documentation de la méthode

bool restoreState(state)

Lit les tailles préférées à partir de state et les applique aux éléments fractionnés.

Renvoie true si l'état a été restauré avec succès, sinon false.

Voir également Serializing SplitView's State et saveState().

var saveState()

Enregistre les tailles préférées des éléments fractionnés dans un tableau d'octets et le renvoie.

Voir également Serializing SplitView's State et restoreState().