Container QML Type

Type de base abstrait offrant des fonctionnalités communes aux conteneurs. Plus d'informations...

• 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

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 d'un conteneur, mais il est également possible de déclarer dynamiquement les éléments add, insert, move et remove. Les éléments d'un conteneur sont accessibles à l'aide de itemAt() ou contentChildren.

La plupart des conteneurs ont le concept d'un élément "courant". L'élément courant est spécifié via la propriété currentIndex et est accessible via la propriété en lecture seule currentItem.

L'exemple suivant illustre l'insertion dynamique d'éléments dans un conteneur 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 ensemble, leurs propriétés currentIndex peuvent être liées l'une à l'autre pour les maintenir synchronisées. Lorsque l'utilisateur interagit avec l'un des conteneurs, les modifications de l'index courant se propagent automatiquement à 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
}

Mise en œuvre des conteneurs

Le conteneur ne fournit pas de visualisation par défaut. Il est utilisé pour mettre en œuvre des conteneurs tels que SwipeView et TabBar. Lors de la mise en œuvre 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
    }
}

Remarquez que la taille des éléments de la page est définie à la main. Cela s'explique par le fait que l'exemple utilise un conteneur simple, qui n'émet aucune hypothèse sur la présentation visuelle. Il n'est généralement pas nécessaire de spécifier la taille des éléments dans les implémentations concrètes de conteneurs, telles que SwipeView et TabBar.

Voir aussi Contrôles de conteneurs.

Documentation sur les propriétés

contentChildren : list<Item>

Cette propriété contient la liste des enfants du contenu.

La 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.

La 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é contient la hauteur du contenu. Elle est utilisée pour calculer la hauteur implicite totale du conteneur.

Sauf si elle est explicitement remplacée, 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 aussi 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é comme 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é contient la largeur du contenu. Elle est utilisée pour calculer la largeur implicite totale du conteneur.

Sauf si elle est explicitement remplacée, la largeur du contenu est automatiquement calculée sur la base de la largeur implicite des éléments du conteneur.

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

Voir aussi 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 en cours.

Voir également currentItem et Managing the Current Index.

currentItem : Item [read-only]

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

Voir aussi currentIndex.

Documentation de la méthode

void addItem(Item item)

Ajoute un 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 currentIndex existantes.

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

Augmente l'index actuel du conteneur.

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

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 item à l'adresse index.

Item itemAt(int index)

Renvoie l'élément à 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'adresse item spécifiée.

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

void setCurrentIndex(int index)

Définit l'adresse index actuelle du conteneur.

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

Voir également currentIndex et Managing the Current Index.

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

Retire et renvoie l'article à index.

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