SplitView QML Type

Dispone los elementos con un divisor arrastrable entre cada uno de ellos. Más...

• Lista de todos los miembros, incluidos los heredados

Propiedades

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

Propiedades anexas

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

Métodos

• bool restoreState(state)
• var saveState()

Descripción detallada

SplitView es un control que dispone elementos horizontal o verticalmente con un divisor arrastrable entre cada elemento.

SplitView soporta las siguientes propiedades adjuntas en los ítems que maneja:

• SplitView.minimumWidth
• SplitView.minimumHeight
• SplitView.preferredWidth
• SplitView.preferredHeight
• SplitView.maximumWidth
• SplitView.maximumHeight
• SplitView.fillWidth (true para un solo hijo)
• SplitView.fillHeight (true para un solo hijo)

Además, cada manejador tiene las siguientes propiedades adjuntas de sólo lectura:

• SplitHandle.hovered
• SplitHandle.pressed

El tamaño preferido de los elementos en una SplitView puede especificarse a través de implicitWidth y implicitHeight o SplitView.preferredWidth y SplitView.preferredHeight:

SplitView {
    anchors.fill: parent

    Item {
        SplitView.preferredWidth: 50
    }

    // ...
}

Para una SplitView horizontal, no es necesario especificar la altura preferida de cada elemento, ya que serán redimensionados a la altura de la vista. Esto se aplica a la inversa para las vistas verticales.

Cuando se arrastra un asa de división, se sobrescribe la propiedad SplitView.preferredWidth o SplitView.preferredHeight, dependiendo de la orientation de la vista.

Para limitar el tamaño de los elementos en una vista horizontal, utilice las siguientes propiedades:

SplitView {
    anchors.fill: parent

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

    // ...
}

Para limitar el tamaño de los elementos en una vista vertical, utilice las siguientes propiedades:

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

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

    // ...
}

Siempre habrá un elemento (el elemento de relleno) en la SplitView que tenga SplitView.fillWidth establecido en true (o SplitView.fillHeight, si orientation es Qt.Vertical). Esto significa que el ítem obtendrá todo el espacio sobrante cuando otros ítems hayan sido distribuidos. Por defecto, el último elemento visible de la SplitView tendrá este valor, pero puede ser cambiado explícitamente estableciendo fillWidth a true en otro elemento.

Un manejador puede pertenecer al ítem tanto del lado izquierdo o superior, como del derecho o inferior:

• Si el elemento de relleno está a la derecha: el tirador pertenece al elemento izquierdo.
• Si el ítem de relleno está a la izquierda: el manejador pertenece al ítem de la derecha.

Para crear una SplitView con tres ítems, y dejar que el ítem central tenga espacio superfluo, se podría hacer lo siguiente:

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

Serializando el Estado de SplitView

El propósito principal de SplitView es permitir a los usuarios configurar fácilmente el tamaño de varios elementos de la interfaz de usuario. Además, los tamaños preferidos por el usuario deben ser recordados en todas las sesiones. Para conseguirlo, los valores de las propiedades SplitView.preferredWidth y SplitView.preferredHeight pueden serializarse utilizando las funciones saveState() y 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
        // ...
    }
}

Alternativamente, se pueden utilizar las funciones value() y 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
        // ...
    }
}

Véase también SplitHandle, Personalización de SplitView y Controles contenedores.

Documentación de propiedades

handle : Component

Esta propiedad contiene el componente handle.

Una instancia de este componente se instanciará count - 1 veces, siempre que count sea mayor que 1.

La siguiente tabla explica cómo se redimensionará cada manejador dependiendo de la orientación de la vista dividida:

Para cambiar el tamaño del manejador para eventos de ratón y táctiles sin cambiar su tamaño visual, utilice 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"
    }
}

Ver también Personalizar SplitView.

orientation : enumeration

Esta propiedad contiene la orientación de SplitView.

La orientación determina cómo se disponen los elementos divididos:

Valores posibles:

resizing : bool [read-only]

Esta propiedad es true cuando el usuario está redimensionando elementos divididos arrastrando sobre las asas del divisor.

Documentación de la propiedad adjunta

SplitView.fillHeight : bool

Esta propiedad adjunta controla si el elemento ocupa el espacio restante en la vista dividida después de que todos los demás elementos hayan sido distribuidos.

Por defecto, el último elemento visible de la vista dividida llenará la vista, pero puede cambiarse ajustando explícitamente fillHeight a true en otro elemento. Si varios elementos tienen fillHeight establecido en true, el elemento situado más arriba llenará la vista.

La altura de un elemento dividido con fillHeight establecido en true sigue estando restringida dentro de sus minimumHeight y maximumHeight.

Véase también minimumHeight, preferredHeight, maximumHeight, y fillWidth.

SplitView.fillWidth : bool

Esta propiedad adjunta controla si el elemento ocupa el espacio restante en la vista dividida después de que todos los demás elementos hayan sido distribuidos.

Por defecto, el último elemento visible de la vista dividida llenará la vista, pero puede cambiarse estableciendo explícitamente fillWidth a true en otro elemento. Si varios elementos tienen fillWidth establecido en true, el elemento situado más a la izquierda llenará la vista.

La anchura de un elemento dividido con fillWidth establecido en true sigue estando restringida dentro de sus minimumWidth y maximumWidth.

Véase también minimumWidth, preferredWidth, maximumWidth, y fillHeight.

SplitView.maximumHeight : real

Esta propiedad adjunta controla la altura máxima del elemento dividido. La propiedad preferredHeight está vinculada a las propiedades minimumHeight y maximumHeight. Un elemento dividido no puede ser arrastrado para que sea más grande que su maximumHeight.

El valor por defecto es Infinity. Para restablecer esta propiedad a su valor por defecto, ajústela a undefined.

Véase también minimumHeight, preferredHeight, fillHeight, y maximumWidth.

SplitView.maximumWidth : real

Esta propiedad adjunta controla la anchura máxima del elemento dividido. La propiedad preferredWidth está vinculada a las propiedades minimumWidth y maximumWidth. Un elemento dividido no puede ser arrastrado para que sea más grande que su maximumWidth.

El valor por defecto es Infinity. Para restablecer esta propiedad a su valor por defecto, ajústela a undefined.

Véase también minimumWidth, preferredWidth, fillWidth, y maximumHeight.

SplitView.minimumHeight : real

Esta propiedad adjunta controla la altura mínima del elemento dividido. La propiedad preferredHeight está vinculada a las propiedades minimumHeight y maximumHeight. Un elemento dividido no puede ser arrastrado para que sea más pequeño que su minimumHeight.

El valor por defecto es 0. Para restablecer esta propiedad a su valor por defecto, ajústela a undefined.

Véase también maximumHeight, preferredHeight, fillHeight, y minimumWidth.

SplitView.minimumWidth : real

Esta propiedad adjunta controla la anchura mínima del elemento dividido. La propiedad preferredWidth está vinculada a las propiedades minimumWidth y maximumWidth. Un elemento dividido no puede ser arrastrado para que sea más pequeño que su minimumWidth.

El valor por defecto es 0. Para restablecer esta propiedad a su valor por defecto, ajústela a undefined.

Véase también maximumWidth, preferredWidth, fillWidth, y minimumHeight.

SplitView.preferredHeight : real

Esta propiedad adjunta controla la altura preferida del elemento dividido. La altura preferida se utilizará como el tamaño del elemento, y se vinculará dentro de minimumHeight y maximumHeight. Si no se establece la altura preferida, se utilizará el implicitHeight del elemento.

Cuando se cambia el tamaño de un elemento dividido, se establece la altura preferida para tener en cuenta el nuevo tamaño.

Por defecto, esta propiedad no está establecida, por lo que se utilizará implicitHeight en su lugar. Para restablecer esta propiedad a su valor por defecto, ajústela a undefined.

Véase también minimumHeight, maximumHeight, fillHeight, y preferredWidth.

SplitView.preferredWidth : real

Esta propiedad adjunta controla la anchura preferida del elemento dividido. La anchura preferida se utilizará como el tamaño del elemento, y se vinculará dentro de minimumWidth y maximumWidth. Si no se establece la anchura preferida, se utilizará el implicitWidth del elemento.

Cuando se cambia el tamaño de un elemento dividido, se establece la anchura preferida para tener en cuenta el nuevo tamaño.

Por defecto, esta propiedad no está establecida, por lo que se utilizará implicitWidth en su lugar. Para restablecer esta propiedad a su valor por defecto, ajústela a undefined.

Véase también minimumWidth, maximumWidth, fillWidth, y preferredHeight.

SplitView.view : SplitView

Esta propiedad adjunta contiene la vista dividida del elemento al que está adjunta, o null si el elemento no está en una vista dividida.

Documentación del método

bool restoreState(state)

Lee los tamaños preferidos de state y los aplica a los elementos divididos.

Devuelve true si el estado se ha restaurado correctamente, en caso contrario false.

Véase también Serializing SplitView's State y saveState().

var saveState()

Guarda los tamaños preferidos de los elementos divididos en una matriz de bytes y la devuelve.

Véase también Serializing SplitView's State y restoreState().