SplitView QML Type

Dispose les éléments avec un séparateur à glissière entre chaque élément. Plus d'informations...

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

Propriétés

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

Propriétés rattaché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 présente des éléments horizontalement ou verticalement avec un séparateur à glisser entre chaque élément.

SplitView prend en charge les propriétés attaché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 pour un seul enfant)
• SplitView.fillHeight (vrai pour un seul enfant)

En outre, chaque poignée possède les propriétés attachées en lecture seule suivantes :

• SplitHandle.hovered
• SplitHandle.pressed

La taille préférée des éléments d'un 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 vue fractionnée horizontale, il n'est pas nécessaire de spécifier la hauteur préférée de chaque élément, car ils seront redimensionnés à la hauteur de la vue. Ceci s'applique à l'inverse pour les vues verticales.

Lorsqu'une poignée de fractionnement est déplacée, la propriété SplitView.preferredWidth ou SplitView.preferredHeight est remplacée, en fonction de 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 vue fractionnée pour lequel SplitView.fillWidth est défini sur true (ou SplitView.fillHeight, si orientation est Qt.Vertical). Cela signifie que l'élément obtiendra tout l'espace restant lorsque les autres éléments auront été disposés. Par défaut, c'est le dernier enfant visible de la vue fractionnée qui bénéficie de ce réglage, mais il peut être modifié en réglant explicitement fillWidth sur true pour un autre élément.

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

• Si l'élément de remplissage est à droite : la poignée appartient à l'élément de gauche.
• Si l'élément de remplissage est à 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 bénéficier d'un espace superflu, 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 des différents éléments de l'interface utilisateur. En outre, 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
        // ...
    }
}

Les fonctions value() et setValue() de Settings peuvent également être utilisées :

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, Personnaliser SplitView et Contrôles de conteneurs.

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 de toucher sans modifier sa taille visuelle, utilisez un 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 Personnaliser SplitView.

orientation : enumeration

Cette propriété définit l'orientation du site SplitView.

L'orientation détermine la manière dont les éléments fractionnés sont disposés :

Valeurs possibles :

resizing : bool [read-only]

Cette propriété est true lorsque l'utilisateur redimensionne des éléments divisés en tirant sur les poignées du séparateur.

Documentation sur la propriété attachée

SplitView.fillHeight : bool

Cette propriété jointe 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 cela peut être modifié en définissant explicitement fillHeight sur true pour un autre élément. Si plusieurs éléments ont fillHeight défini sur true, l'élément le plus haut remplira la vue.

La hauteur d'un élément fractionné pour lequel fillHeight est défini sur true est toujours limitée à l'intérieur de ses éléments minimumHeight et maximumHeight.

Voir également minimumHeight, preferredHeight, maximumHeight, et fillWidth.

SplitView.fillWidth : bool

Cette propriété jointe 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 cela peut être modifié en définissant explicitement fillWidth sur true pour un autre élément. Si plusieurs éléments ont fillWidth défini sur true, l'élément le plus à gauche remplira la vue.

La largeur d'un élément fractionné pour lequel fillWidth est défini sur true est toujours limitée à l'intérieur des éléments minimumWidth et maximumWidth.

Voir également minimumWidth, preferredWidth, maximumWidth, et fillHeight.

SplitView.maximumHeight : real

Cette propriété jointe contrôle la hauteur maximale de l'élément fractionné. La propriété preferredHeight est liée aux propriétés minimumHeight et maximumHeight. Un élément fractionné ne peut pas être déplacé pour être plus grand que son maximumHeight.

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

Voir également minimumHeight, preferredHeight, fillHeight, et maximumWidth.

SplitView.maximumWidth : real

Cette propriété jointe contrôle la largeur maximale de l'élément fractionné. La propriété preferredWidth est liée aux propriétés minimumWidth et maximumWidth. Un élément fractionné ne peut pas être déplacé pour être plus grand que son maximumWidth.

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

Voir également minimumWidth, preferredWidth, fillWidth, et maximumHeight.

SplitView.minimumHeight : real

Cette propriété jointe contrôle la hauteur minimale de l'élément fractionné. La propriété preferredHeight est liée aux propriétés minimumHeight et maximumHeight. Un élément fractionné ne peut pas être déplacé pour être plus petit que son minimumHeight.

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

Voir également maximumHeight, preferredHeight, fillHeight, et minimumWidth.

SplitView.minimumWidth : real

Cette propriété jointe contrôle la largeur minimale de l'élément fractionné. L'adresse preferredWidth est liée à la largeur minimale et à l'adresse maximumWidth. Un élément fractionné ne peut pas être déplacé pour être plus petit que sa valeur minimumWidth.

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

Voir également maximumWidth, preferredWidth, fillWidth, et minimumHeight.

SplitView.preferredHeight : real

Cette propriété jointe contrôle la hauteur préférée de l'élément fractionné. La hauteur préférée sera utilisée comme taille de l'élément et sera liée aux valeurs minimumHeight et maximumHeight. Si la hauteur préférée n'est pas définie, c'est la valeur implicitHeight de l'élément qui sera utilisée.

Lorsqu'un élément fractionné est redimensionné, la hauteur préférée est définie afin de tenir compte de la nouvelle taille.

Par défaut, cette propriété n'est pas définie, et c'est donc implicitHeight qui sera utilisé à la place. Pour rétablir la valeur par défaut de cette propriété, attribuez-lui la valeur undefined.

Voir également minimumHeight, maximumHeight, fillHeight et preferredWidth.

SplitView.preferredWidth : real

Cette propriété jointe contrôle la largeur préférée de l'élément fractionné. La largeur préférée sera utilisée comme taille de l'élément et sera liée à minimumWidth et maximumWidth. Si la largeur préférée n'est pas définie, c'est la largeur de l'élément implicitWidth qui sera utilisée.

Lorsqu'un élément fractionné est redimensionné, la largeur préférée est définie afin de tenir compte de la nouvelle taille.

Par défaut, cette propriété n'est pas définie, et c'est donc implicitWidth qui sera utilisé à la place. Pour rétablir la valeur par défaut de cette propriété, attribuez-lui la valeur undefined.

Voir également minimumWidth, maximumWidth, fillWidth et preferredHeight.

SplitView.view : SplitView

Cette propriété attachée contient la vue fractionnée de l'élément auquel elle est attachée, ou null si l'élément n'est pas dans une vue fractionnée.

Documentation de la méthode

bool restoreState(state)

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

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

Voir aussi 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 aussi Serializing SplitView's State et restoreState().