Container QML Type

Tipo base abstracto que proporciona funcionalidad común a los contenedores. Más...

• Lista de todos los miembros, incluidos los heredados

Propiedades

• contentChildren : list<Item>
• contentData : list<QtObject>
• contentHeight : real (since QtQuick.Controls 2.5 (Qt 5.12))
• contentModel : model
• contentWidth : real (since QtQuick.Controls 2.5 (Qt 5.12))
• count : int
• currentIndex : int
• currentItem : Item

Métodos

• void addItem(Item item)
• void decrementCurrentIndex() (since QtQuick.Controls 2.1 (Qt 5.8))
• void incrementCurrentIndex() (since QtQuick.Controls 2.1 (Qt 5.8))
• void insertItem(int index, Item item)
• Item itemAt(int index)
• void moveItem(int from, int to)
• void removeItem(Item item) (since QtQuick.Controls 2.3 (Qt 5.10))
• void setCurrentIndex(int index)
• Item takeItem(int index) (since QtQuick.Controls 2.3 (Qt 5.10))

Descripción detallada

Container es el tipo base de los controles de interfaz de usuario de tipo contenedor que permiten insertar y eliminar elementos de forma dinámica.

Uso de contenedores

Normalmente, los elementos se declaran estáticamente como hijos de Container, pero también es posible add, insert, move y remove elementos dinámicamente. Se puede acceder a los elementos de un contenedor mediante itemAt() o contentChildren.

La mayoría de los contenedores tienen el concepto de elemento "actual". El elemento actual se especifica mediante la propiedad currentIndex y se puede acceder a él mediante la propiedad de sólo lectura currentItem.

El siguiente ejemplo ilustra la inserción dinámica de elementos en un TabBar, que es una de las implementaciones concretas de Container.

Row {
    TabBar {
        id: tabBar

        currentIndex: 0
        width: parent.width - addButton.width

        TabButton { text: "TabButton" }
    }

    Component {
        id: tabButton
        TabButton { text: "TabButton" }
    }

    Button {
        id: addButton
        text: "+"
        flat: true
        onClicked: {
            tabBar.addItem(tabButton.createObject(tabBar))
            console.log("added:", tabBar.itemAt(tabBar.count - 1))
        }
    }
}

Gestión del índice actual

Cuando se utilizan varios contenedores, como TabBar y SwipeView, juntos, sus propiedades currentIndex pueden vincularse entre sí para mantenerlos sincronizados. Cuando el usuario interactúa con cualquiera de los contenedores, los cambios en su índice actual se propagan automáticamente al otro contenedor.

Tenga en cuenta, sin embargo, que la asignación de un valor currentIndex en JavaScript elimina la vinculación respectiva. Para conservar las vinculaciones, utilice los siguientes métodos para modificar el índice actual:

• incrementCurrentIndex()
• decrementCurrentIndex()
• setCurrentIndex()

TabBar {
    id: tabBar
    currentIndex: swipeView.currentIndex
}

SwipeView {
    id: swipeView
    currentIndex: tabBar.currentIndex
}

Button {
    text: qsTr("Home")
    onClicked: swipeView.setCurrentIndex(0)
    enabled: swipeView.currentIndex != 0
}

Button {
    text: qsTr("Previous")
    onClicked: swipeView.decrementCurrentIndex()
    enabled: swipeView.currentIndex > 0
}

Button {
    text: qsTr("Next")
    onClicked: swipeView.incrementCurrentIndex()
    enabled: swipeView.currentIndex < swipeView.count - 1
}

Implementación de contenedores

Container no proporciona ninguna visualización por defecto. Se utiliza para implementar contenedores como SwipeView y TabBar. Cuando se implementa un contenedor personalizado, la parte más importante de la API es contentModel, que proporciona los ítems contenidos de forma que pueda ser utilizado como modelo de objeto para vistas de ítems y repetidores.

Container {
    id: container

    contentItem: ListView {
        model: container.contentModel
        snapMode: ListView.SnapOneItem
        orientation: ListView.Horizontal
    }

    Text {
        text: "Page 1"
        width: container.width
        height: container.height
    }

    Text {
        text: "Page 2"
        width: container.width
        height: container.height
    }
}

Observe cómo los tamaños de los elementos de la página se establecen a mano. Esto se debe a que el ejemplo utiliza un Contenedor plano, que no hace ninguna suposición sobre el diseño visual. Normalmente no es necesario especificar el tamaño de los elementos en implementaciones concretas de Contenedores, como SwipeView y TabBar.

Véase también Controles de Contenedor.

Documentación de propiedades

contentChildren : list<Item>

Esta propiedad contiene la lista de hijos del contenido.

La lista contiene todos los elementos que se han declarado en QML como hijos del contenedor, y también los elementos que se han añadido o insertado dinámicamente mediante los métodos addItem() y insertItem(), respectivamente.

Véase también Item::children y contentData.

contentData : list<QtObject> [default]

Esta propiedad contiene la lista de datos de contenido.

La lista contiene todos los objetos que se han declarado en QML como hijos del contenedor, y también los elementos que se han añadido o insertado dinámicamente mediante los métodos addItem() y insertItem(), respectivamente.

Véase también Item::data y contentChildren.

contentHeight : real [since QtQuick.Controls 2.5 (Qt 5.12)]

Esta propiedad contiene la altura del contenido. Se utiliza para calcular la altura total implícita del contenedor.

A menos que se sobreescriba explícitamente, la altura del contenido se calcula automáticamente basándose en la altura implícita de los elementos del contenedor.

Esta propiedad se introdujo en QtQuick.Controls 2.5 (Qt 5.12).

Véase también contentWidth.

contentModel : model [read-only]

Esta propiedad contiene el modelo de contenido de los artículos.

El modelo de contenido se proporciona con fines de visualización. Puede asignarse como modelo a un elemento de contenido que presenta el contenido del contenedor.

Container {
    id: container
    contentItem: ListView {
        model: container.contentModel
    }
}

Véase también contentData y contentChildren.

contentWidth : real [since QtQuick.Controls 2.5 (Qt 5.12)]

Esta propiedad contiene el ancho del contenido. Se utiliza para calcular la anchura total implícita del contenedor.

A menos que se sobreescriba explícitamente, la anchura del contenido se calcula automáticamente basándose en la anchura implícita de los elementos del contenedor.

Esta propiedad se introdujo en QtQuick.Controls 2.5 (Qt 5.12).

Véase también contentHeight.

count : int [read-only]

Esta propiedad contiene el número de elementos.

currentIndex : int

Esta propiedad contiene el índice del elemento actual.

Véase también currentItem y Managing the Current Index.

currentItem : Item [read-only]

Esta propiedad contiene el elemento actual.

Véase también currentIndex.

Documentación del método

void addItem(Item item)

Añade una dirección item.

[since QtQuick.Controls 2.1 (Qt 5.8)] void decrementCurrentIndex()

Disminuye el índice actual del contenedor.

Este método puede ser llamado para alterar el índice actual sin romper los enlaces currentIndex existentes.

Este método se introdujo en QtQuick.Controls 2.1 (Qt 5.8).

Véase también currentIndex y Managing the Current Index.

[since QtQuick.Controls 2.1 (Qt 5.8)] void incrementCurrentIndex()

Incrementa el índice actual del contenedor.

Este método puede ser llamado para alterar el índice actual sin romper los enlaces currentIndex existentes.

Este método se introdujo en QtQuick.Controls 2.1 (Qt 5.8).

Véase también currentIndex y Managing the Current Index.

void insertItem(int index, Item item)

Inserta un item en index.

Item itemAt(int index)

Devuelve el elemento en index, o null si no existe.

void moveItem(int from, int to)

Mueve un elemento from un índice to otro.

[since QtQuick.Controls 2.3 (Qt 5.10)] void removeItem(Item item)

Elimina y destruye el item especificado.

Este método se introdujo en QtQuick.Controls 2.3 (Qt 5.10).

void setCurrentIndex(int index)

Establece el index actual del contenedor.

Se puede llamar a este método para establecer un índice actual específico sin romper los enlaces currentIndex existentes.

Véase también currentIndex y Managing the Current Index.

[since QtQuick.Controls 2.3 (Qt 5.10)] Item takeItem(int index)

Elimina y devuelve el elemento en index.

Este método se introdujo en QtQuick.Controls 2.3 (Qt 5.10).