Qt 5.7 | Qt Quick Controls 2 | QML Types | SwipeView QML Type

Qt 5.7.1 Reference Documentation

# SwipeView QML Type

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

Import Statement: | import QtQuick.Controls 2.0
Since: | Qt 5.7
Inherits: | Container

- List of all members, including inherited members

## Attached Properties

- index : int
- isCurrentItem : 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.

Note: SwipeView takes over the geometry management of items added to the view. Using anchors on the items is not supported, and any `width` or `height` assignment will be overridden by the view. Notice that this only applies to the root of the item. Specifying width and height, or using anchors for its children works as expected.

See also TabBar, PageIndicator, Customizing SwipeView, Navigation Controls, and Container Controls.

## Attached Property Documentation

[read-only] SwipeView.index : int

This attached property holds the index of each child item in the SwipeView.

It is attached to each child item of the SwipeView.

[read-only] SwipeView.isCurrentItem : bool

This attached property is `true` if this child is the current item.

It is attached to each child item of the SwipeView.

[read-only] SwipeView.view : SwipeView

This attached property holds the view that manages this child item.

It is attached to each child item of the SwipeView.