Container QML Type

Abstrakter Basistyp, der Funktionen bereitstellt, die allen Containern gemeinsam sind. Mehr...

• Liste aller Mitglieder, einschließlich geerbter Mitglieder

Eigenschaften

• 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

Methoden

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

Ausführliche Beschreibung

„Container“ ist der Basistyp für containerähnliche Benutzeroberflächenelemente, die das dynamische Hinzufügen und Entfernen von Elementen ermöglichen.

Verwendung von Containern

In der Regel werden Elemente statisch als untergeordnete Elemente eines „Container“ deklariert, es ist jedoch auch möglich, Elemente dynamisch mit „ add “, „ insert “, „ move “ und „ remove “ einzufügen. Auf die Elemente in einem Container kann mit „ itemAt()“ oder „ contentChildren “ zugegriffen werden.

Die meisten Container kennen das Konzept eines „aktuellen“ Elements. Das aktuelle Element wird über die Eigenschaft „ currentIndex “ festgelegt 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` darstellt.

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

Verwaltung des aktuellen Index

Bei der gemeinsamen Verwendung mehrerer Container, wie z. B. „ TabBar “ und „ SwipeView “, können deren „ currentIndex “-Eigenschaften miteinander verknüpft 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 Werts für „ currentIndex “ in JavaScript die jeweilige Bindung aufhebt. Um die Bindungen beizubehalten, verwenden Sie die folgenden Methoden, um den aktuellen Index zu ändern:

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

Implementierung von Containern

„Container“ bietet keine Standardvisualisierung. Er dient zur Implementierung von Containern wie „ SwipeView “ und „ TabBar “. Bei der Implementierung eines benutzerdefinierten Containers ist der wichtigste Teil der API „ contentModel “, der die enthaltenen Elemente so bereitstellt, dass sie als Objektmodell für Elementansichten und Repeater verwendet werden können.

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 manuell festgelegt werden. Dies liegt daran, dass das Beispiel einen einfachen Container verwendet, der keine Annahmen hinsichtlich des visuellen Layouts trifft. In konkreten Container-Implementierungen wie SwipeView und TabBar ist es in der Regel nicht erforderlich, Größen für Elemente anzugeben.

Siehe auch „Container-Steuerelemente“.

Dokumentation zu den Eigenschaften

contentChildren : list<Item>

Diese Eigenschaft enthält die Liste der untergeordneten Elemente.

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

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 dynamisch hinzugefügt bzw. mit den Methoden „ addItem()“ und „ insertItem()“ eingefügt wurden.

Siehe auch „ Item::data “ und „ contentChildren “.

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

Diese Eigenschaft gibt die Höhe des Inhalts an. Sie wird zur Berechnung der impliziten Gesamthöhe des Containers verwendet.

Sofern sie nicht explizit überschrieben wird, wird die Inhaltshöhe 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 dient zu Visualisierungszwecken. Es kann einem Inhaltselement als Modell 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 gibt die Breite des Inhalts an. Sie wird zur Berechnung der impliziten Gesamtbreite des Containers verwendet.

Sofern 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 gibt die Anzahl der Elemente an.

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

Methodendokumentation

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 einen Eintrag unter item bei index ein.

Item itemAt(int index)

Gibt das Element unter index zurück oder null, falls es nicht existiert.

void moveItem(int from, int to)

Verschiebt ein Element from einen Index weiter to ein anderes.

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

Entfernt und löscht das angegebene „ item “.

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

void setCurrentIndex(int index)

Legt den aktuellen index des Containers fest.

Diese Methode kann aufgerufen werden, um einen bestimmten aktuellen Index festzulegen, 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 das Element unter index und gibt es zurück.

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