SwipeView QML Type

Enables the user to navigate pages by swiping sideways. More...

• List of all members, including inherited members

Properties

• horizontal : bool
• interactive : bool
• orientation : enumeration
• vertical : bool

Attached Properties

• index : int
• isCurrentItem : bool
• isNextItem : bool
• isPreviousItem : bool
• view : SwipeView

Detailed Description

SwipeView provides a swipe-based navigation model.

SwipeView is populated with a set of pages. One page is visible at a time. The user can navigate between the pages by swiping sideways. Notice that SwipeView itself is entirely non-visual. It is recommended to combine it with PageIndicator, to give the user a visual clue that there are multiple pages.

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
}

As shown above, SwipeView is typically populated with a static set of pages that are defined inline as children of the view. It is also possible to add, insert, move, and remove pages dynamically at run time.

When SwipeView is paired with another container such as TabBar, it is necessary to make a two-way binding between the currentIndex property of each control. To do this without breaking bindings, avoid setting currentIndex directly, and instead use setCurrentIndex(), for example. See Managing the Current Index for more information.

To perform an action when currentIndex changes, use the onCurrentIndexChanged property change signal handler:

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

It is generally not advisable to add excessive amounts of pages to a SwipeView. However, when the amount of pages grows larger, or individual pages are relatively complex, it may be desirable to free up resources by unloading pages that are outside the immediate reach of the user. The following example presents how to use Loader to keep a maximum of three pages simultaneously instantiated.

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

See also TabBar, PageIndicator, Customizing SwipeView, Navigation Controls, Container Controls, and Focus Management in Qt Quick Controls.

Property Documentation

Attached Property Documentation