Back to Qt.io
Contact Us Blog Download Qt

Container QML Type

Abstrakter Basistyp, der gemeinsame Funktionalität für Container bietet. Mehr...

Import Statement: import QtQuick.Controls
Inherits:

Control

Inherited By:

DialogButtonBox, MenuBar, SplitView, SwipeView, and TabBar

Eigenschaften

Methoden

Ausführliche Beschreibung

Container ist der Basistyp für containerähnliche Steuerelemente der Benutzeroberfläche, die ein dynamisches Einfügen und Entfernen von Elementen ermöglichen.

Verwendung von Containern

Normalerweise werden Elemente statisch als Kinder von Container deklariert, aber es ist auch möglich, add, insert, move und remove Elemente dynamisch zu deklarieren. Auf die Elemente in einem Container kann mit itemAt() oder contentChildren zugegriffen werden.

Die meisten Container haben das Konzept eines "aktuellen" Elements. Das aktuelle Element wird über die Eigenschaft currentIndex angegeben und kann über die schreibgeschützte Eigenschaft currentItem abgerufen werden.

Das folgende Beispiel veranschaulicht das dynamische Einfügen von Elementen in einen TabBar, der eine der konkreten Implementierungen von Container ist.

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

Verwalten des aktuellen Index

Wenn mehrere Container, wie TabBar und SwipeView, zusammen verwendet werden, können ihre currentIndex Eigenschaften aneinander gebunden werden, um sie synchron zu halten. Wenn der Benutzer mit einem der beiden Container interagiert, werden die Änderungen des aktuellen Index automatisch auf den anderen Container übertragen.

Beachten Sie jedoch, dass die Zuweisung eines currentIndex Wertes in JavaScript die jeweilige Bindung aufhebt. Um die Bindungen beizubehalten, verwenden Sie die folgenden Methoden, um den aktuellen Index zu ändern:

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
}

Implementierung von Containern

Container bietet keine Standardvisualisierung. Er wird verwendet, um Container wie SwipeView und TabBar zu implementieren. Bei der Implementierung eines benutzerdefinierten Containers ist der wichtigste Teil der API contentModel, der die enthaltenen Elemente so bereitstellt, dass er als Objektmodell für Elementansichten und Repeater verwendet werden kann.

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

Beachten Sie, dass die Größen der Seitenelemente von Hand festgelegt werden. Das liegt daran, dass das Beispiel einen einfachen Container verwendet, der keine Annahmen über das visuelle Layout macht. Bei konkreten Container-Implementierungen wie SwipeView und TabBar ist es in der Regel nicht erforderlich, Größen für Elemente anzugeben.

Siehe auch Container Controls.

Eigenschaft Dokumentation

contentChildren : list<Item>

Diese Eigenschaft enthält die Liste der Kinder des Inhalts.

Die Liste enthält alle Elemente, die in QML als Kinder des Containers deklariert wurden, sowie Elemente, die mit den Methoden addItem() bzw. insertItem() dynamisch hinzugefügt oder eingefügt wurden.

Hinweis: Im Gegensatz zu contentData enthält contentChildren keine nicht visuellen QML-Objekte. Sie wird neu geordnet, wenn Elemente eingefügt oder verschoben werden.

Siehe auch Item::children und contentData.


contentData : list<QtObject> [default]

Diese Eigenschaft enthält die Liste der Inhaltsdaten.

Die Liste enthält alle Objekte, die in QML als Kinder des Containers deklariert wurden, sowie Elemente, die mit den Methoden addItem() und insertItem() dynamisch hinzugefügt oder eingefügt wurden.

Hinweis: Im Gegensatz zu contentChildren enthält contentData auch nicht-visuelle QML-Objekte. Sie wird nicht neu geordnet, wenn Elemente eingefügt oder verschoben werden.

Siehe auch Item::data und contentChildren.


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

Diese Eigenschaft enthält die Höhe des Inhalts. Sie wird für die Berechnung der gesamten impliziten Höhe des Containers verwendet.

Wenn sie nicht explizit überschrieben wird, wird die Höhe des Inhalts automatisch auf der Grundlage der impliziten Höhe der Elemente im Container berechnet.

Diese Eigenschaft wurde in QtQuick.Controls 2.5 (Qt 5.12) eingeführt.

Siehe auch contentWidth.


contentModel : model [read-only]

Diese Eigenschaft enthält das Inhaltsmodell der Elemente.

Das Inhaltsmodell wird für Visualisierungszwecke bereitgestellt. Es kann als Modell einem Inhaltselement zugewiesen werden, das den Inhalt des Containers darstellt.

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

Siehe auch contentData und contentChildren.


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

Diese Eigenschaft enthält die Breite des Inhalts. Sie wird für die Berechnung der gesamten impliziten Breite des Containers verwendet.

Wenn sie nicht explizit überschrieben wird, wird die Inhaltsbreite automatisch auf der Grundlage der impliziten Breite der Elemente im Container berechnet.

Diese Eigenschaft wurde in QtQuick.Controls 2.5 (Qt 5.12) eingeführt.

Siehe auch contentHeight.


count : int [read-only]

Diese Eigenschaft enthält die Anzahl der Elemente.


currentIndex : int

Diese Eigenschaft enthält den Index des aktuellen Elements.

Siehe auch currentItem und Managing the Current Index.


currentItem : Item [read-only]

Diese Eigenschaft enthält das aktuelle Element.

Siehe auch currentIndex.


Methode Dokumentation

void addItem(Item item)

Fügt ein item hinzu.


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

Verringert den aktuellen Index des Containers.

Diese Methode kann aufgerufen werden, um den aktuellen Index zu ändern, ohne bestehende currentIndex Bindungen zu unterbrechen.

Diese Methode wurde in QtQuick.Controls 2.1 (Qt 5.8) eingeführt.

Siehe auch currentIndex und Managing the Current Index.


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

Erhöht den aktuellen Index des Containers.

Diese Methode kann aufgerufen werden, um den aktuellen Index zu ändern, ohne bestehende currentIndex Bindungen zu unterbrechen.

Diese Methode wurde in QtQuick.Controls 2.1 (Qt 5.8) eingeführt.

Siehe auch currentIndex und Managing the Current Index.


void insertItem(int index, Item item)

Fügt ein item an index ein.


Item itemAt(int index)

Gibt das Element an index zurück, oder null wenn es nicht existiert.


void moveItem(int from, int to)

Verschiebt ein Element from einen Index to einen anderen.


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

Entfernt und zerstört das angegebene item.

Diese Methode wurde in QtQuick.Controls 2.3 (Qt 5.10) eingeführt.


void setCurrentIndex(int index)

Setzt den aktuellen index des Containers.

Diese Methode kann aufgerufen werden, um einen bestimmten aktuellen Index zu setzen, ohne bestehende currentIndex Bindungen zu unterbrechen.

Siehe auch currentIndex und Managing the Current Index.


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

Entfernt den Artikel und gibt ihn unter index zurück.

Hinweis: Das Eigentum an dem Element wird an den Aufrufer übertragen.

Diese Methode wurde in QtQuick.Controls 2.3 (Qt 5.10) eingeführt.


© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.