SwipeView QML Type

Ermöglicht es dem Benutzer, durch seitliches Wischen zu navigieren. Mehr...

• Liste aller Mitglieder, einschließlich geerbter Mitglieder

Eigenschaften

• horizontal : bool (since QtQuick.Controls 2.3 (Qt 5.10))
• interactive : bool (since QtQuick.Controls 2.1 (Qt 5.8))
• orientation : enumeration (since QtQuick.Controls 2.2 (Qt 5.9))
• vertical : bool (since QtQuick.Controls 2.3 (Qt 5.10))

Beigefügte Eigenschaften

• index : int
• isCurrentItem : bool
• isNextItem : bool (since QtQuick.Controls 2.1 (Qt 5.8))
• isPreviousItem : bool (since QtQuick.Controls 2.1 (Qt 5.8))
• view : SwipeView

Ausführliche Beschreibung

SwipeView bietet ein auf Streichen basierendes Navigationsmodell.

SwipeView wird mit einer Reihe von Seiten bestückt. Jeweils eine Seite ist sichtbar. Der Benutzer kann durch seitliches Streichen zwischen den Seiten navigieren. Beachten Sie, dass SwipeView selbst völlig nicht visuell ist. Es wird empfohlen, es mit PageIndicator zu kombinieren, um dem Benutzer einen visuellen Hinweis zu geben, dass es mehrere Seiten gibt.

SwipeView {
    id: view

    currentIndex: 1
    anchors.fill: parent

    Item {
        id: firstPage
    }
    Item {
        id: secondPage
    }
    Item {
        id: thirdPage
    }
}

PageIndicator {
    id: indicator

    count: view.count
    currentIndex: view.currentIndex

    anchors.bottom: view.bottom
    anchors.horizontalCenter: parent.horizontalCenter
}

Wie oben gezeigt, wird SwipeView typischerweise mit einem statischen Satz von Seiten befüllt, die inline als Kinder der Ansicht definiert sind. Es ist auch möglich, die Seiten add, insert, move und remove dynamisch zur Laufzeit hinzuzufügen.

Wenn SwipeView mit einem anderen Container wie z.B. TabBar gepaart wird, ist es notwendig, eine zweiseitige Bindung zwischen der currentIndex Eigenschaft jedes Controls herzustellen. Um dies zu tun, ohne die Bindungen zu unterbrechen, vermeiden Sie es, currentIndex direkt zu setzen, und verwenden Sie stattdessen z.B. setCurrentIndex(). Siehe Managing the Current Index für weitere Informationen.

Um eine Aktion auszuführen, wenn sich currentIndex ändert, verwenden Sie den onCurrentIndexChanged property change signal handler:

onCurrentIndexChanged: {
    print("currentIndex changed to", currentIndex)
    // ...
}

Es ist im Allgemeinen nicht ratsam, einer SwipeView übermäßig viele Seiten hinzuzufügen. Wenn jedoch die Anzahl der Seiten größer wird oder einzelne Seiten relativ komplex sind, kann es wünschenswert sein, Ressourcen freizugeben, indem Seiten, die außerhalb der unmittelbaren Reichweite des Benutzers liegen, entladen werden. Das folgende Beispiel zeigt, wie man Loader verwendet, um maximal drei Seiten gleichzeitig zu instanziieren.

SwipeView {
    Repeater {
        model: 6
        Loader {
            active: SwipeView.isCurrentItem || SwipeView.isNextItem || SwipeView.isPreviousItem
            sourceComponent: Text {
                text: index
                Component.onCompleted: console.log("created:", index)
                Component.onDestruction: console.log("destroyed:", index)
            }
        }
    }
}

Siehe auch TabBar, PageIndicator, Customizing SwipeView, Navigation Controls, Container Controls und Focus Management in Qt Quick Controls.

Eigenschaft Dokumentation

Dokumentation der Eigenschaft Attached