Container QML Type

Type de base abstrait fournissant des fonctionnalités communes aux conteneurs. En savoir plus…

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

Propriétés

• 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éthodes

• 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))

Description détaillée

Le « Container » est le type de base des contrôles d'interface utilisateur de type « conteneur » qui permettent l'insertion et la suppression dynamiques d'éléments.

Utilisation des conteneurs

En règle générale, les éléments sont déclarés de manière statique en tant qu’enfants du Container, mais il est également possible d’ add, insert, move et remove des éléments de manière dynamique. Les éléments d’un conteneur sont accessibles via itemAt() ou contentChildren.

La plupart des conteneurs intègrent la notion d’élément « actuel ». L’élément actuel est spécifié via la propriété currentIndex et est accessible à l’aide de la propriété en lecture seule currentItem.

L’exemple suivant illustre l’insertion dynamique d’éléments dans un TabBar, qui est l’une des implémentations concrètes 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))
        }
    }
}

Gestion de l’index actuel

Lorsque plusieurs conteneurs, tels que TabBar et SwipeView, sont utilisés conjointement, leurs propriétés currentIndex peuvent être liées les unes aux autres afin de les maintenir synchronisées. Lorsque l’utilisateur interagit avec l’un ou l’autre des conteneurs, les modifications apportées à son index actuel se répercutent automatiquement sur l’autre conteneur.

Notez toutefois que l’attribution d’une valeur à currentIndex en JavaScript supprime la liaison correspondante. Afin de conserver les liaisons, utilisez les méthodes suivantes pour modifier l’index actuel :

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

Implémentation des conteneurs

La classe `Container` ne fournit aucune visualisation par défaut. Elle sert à implémenter des conteneurs tels que ` SwipeView ` et ` TabBar`. Lors de l’implémentation d’un conteneur personnalisé, la partie la plus importante de l’API est ` contentModel`, qui fournit les éléments contenus de manière à ce qu’ils puissent être utilisés comme modèle d’objet pour les vues d’éléments et les répétiteurs.

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

Notez que les tailles des éléments de la page sont définies manuellement. En effet, cet exemple utilise un conteneur simple (Container), qui ne fait aucune supposition quant à la mise en page visuelle. Il n’est généralement pas nécessaire de spécifier les tailles des éléments dans les implémentations concrètes de Container, telles que SwipeView et TabBar.

Voir également Contrôles de conteneur.

Documentation sur les propriétés

contentChildren : list<Item>

Cette propriété contient la liste des éléments enfants de contenu.

Cette liste contient tous les éléments qui ont été déclarés en QML en tant qu'enfants du conteneur, ainsi que les éléments qui ont été ajoutés ou insérés dynamiquement à l'aide des méthodes addItem() et insertItem(), respectivement.

Voir également Item::children et contentData.

contentData : list<QtObject> [default]

Cette propriété contient la liste des données de contenu.

Cette liste contient tous les objets qui ont été déclarés en QML en tant qu'enfants du conteneur, ainsi que les éléments qui ont été ajoutés ou insérés dynamiquement à l'aide des méthodes addItem() et insertItem(), respectivement.

Voir également Item::data et contentChildren.

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

Cette propriété détermine la hauteur du contenu. Elle sert à calculer la hauteur implicite totale du conteneur.

À moins d'être explicitement redéfinie, la hauteur du contenu est automatiquement calculée en fonction de la hauteur implicite des éléments du conteneur.

Cette propriété a été introduite dans QtQuick.Controls 2.5 (Qt 5.12).

Voir également contentWidth.

contentModel : model [read-only]

Cette propriété contient le modèle de contenu des éléments.

Le modèle de contenu est fourni à des fins de visualisation. Il peut être attribué en tant que modèle à un élément de contenu qui présente le contenu du conteneur.

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

Voir également contentData et contentChildren.

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

Cette propriété définit la largeur du contenu. Elle sert à calculer la largeur implicite totale du conteneur.

À moins d'être explicitement redéfinie, la largeur du contenu est automatiquement calculée en fonction de la largeur implicite des éléments du conteneur.

Cette propriété a été introduite dans QtQuick.Controls 2.5 (Qt 5.12).

Voir également contentHeight.

count : int [read-only]

Cette propriété contient le nombre d'éléments.

currentIndex : int

Cette propriété contient l'index de l'élément actuel.

Voir également currentItem et Managing the Current Index.

currentItem : Item [read-only]

Cette propriété contient l'élément actuel.

Voir également currentIndex.

Documentation des méthodes

void addItem(Item item)

Ajoute un fichier « item ».

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

Diminue l'index actuel du conteneur.

Cette méthode peut être appelée pour modifier l'index actuel sans rompre les liaisons existantes avec les éléments d'currentIndex.

Cette méthode a été introduite dans QtQuick.Controls 2.1 (Qt 5.8).

Voir également currentIndex et Managing the Current Index.

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

Incrémente l'index actuel du conteneur.

Cette méthode peut être appelée pour modifier l'index actuel sans rompre les liaisons existantes avec les éléments « currentIndex ».

Cette méthode a été introduite dans QtQuick.Controls 2.1 (Qt 5.8).

Voir également currentIndex et Managing the Current Index.

void insertItem(int index, Item item)

Insère un article intitulé « item » à l'adresse index.

Item itemAt(int index)

Renvoie l'élément situé à l'adresse index, ou null s'il n'existe pas.

void moveItem(int from, int to)

Déplace un élément from d'un index to à un autre.

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

Supprime et détruit l'item spécifié.

Cette méthode a été introduite dans QtQuick.Controls 2.3 (Qt 5.10).

void setCurrentIndex(int index)

Définit l'index actuelle du conteneur.

Cette méthode peut être appelée pour définir un index courant spécifique sans rompre les liaisons d'currentIndex s existantes.

Voir également currentIndex et Managing the Current Index.

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

Supprime et renvoie l'élément situé à l'adresse index.

Cette méthode a été introduite dans QtQuick.Controls 2.3 (Qt 5.10).