API Documentation
Documentation for developing SailfishOS applicationsPagedView QML Type
A paged item view. More...
| Import Statement: | import Sailfish.Silica 1.0 |
| Inherits: |
Properties
- cacheSize : int
- contentItem : Item
- count : int
- currentIndex : int
- currentItem : string
- delegate : Component
- direction : enum
- dragThreshold : int
- dragging : bool
- horizontalAlignment : enum
- horizontalSpacing : real
- interactive : bool
- model : variant
- moveDragThreshold : bool
- moveDuration : int
- moving : bool
- verticalAlignment : enum
- verticalSpacing : real
- wrapMode : enum
Attached Properties
- contentHeight : real
- contentWidth : real
- view : PagedView
Detailed Description
The PagedView type provides a paged item view. It displays a single item at a time from a set of items constructed from model data and a delegate.
A drag gesture along the axis of an interactive view's direction will pull an adjacent item into view and make it the current item if the item has been dragged further than the moveDragThreshold when released. Flicking the view along the same axis can trigger an item change without the need to drag as far.
A basic use case of the page view is a slideshow of images:
import Sailfish.Silica 1.0
PagedView {
model: ListModel {
ListElement { url: "image1.jpg" }
ListElement { url: "image2.jpg" }
ListElement { url: "image3.jpg" }
ListElement { url: "image4.jpg" }
}
delegate: Image {
width: PagedView.contentWidth
height: PagedView.contentHeight
source: model.url
fillMode: Image.PreserveAspectFit
}
}Note: This QML type is under development and is subject to change.
Property Documentation
The number of items surrounding and including the current item which will be asynchronously constructed ahead of time and cached.
Populating the cache can improve responsiveness when the flicking between items as the next item in the view will typically be available and ready to show immediately.
The default size of 5 items will make a couple of items available to either side of the current item.
The parent item for page items created in the view.
By default this item fills the view but it can be resized and repositioned to introduce margins within the interactive area of the view. This can be used for example to create space for a header at the top of view where horizontal drags for switching pages are still recognized.
The model index of the item which should be shown in the view.
By default changing the current item is animated. To change the current index without animating call the moveTo() function with the PagedView.Immediate argument.
The currently visible item in the view.
The current item can be changed by writing to the currentIndex property or calling the moveTo() function. If the view is animating when the current index is changed there may be a delay in updating the current item.
An Item delegate from which a page in the view will be constructed based on an entry in the source model.
The direction in which items are laid out in the view. This determines the side of the view transitioning items arrive from, the adjacent item a drag gesture will pull into view and the axis drag gestures are observed on.
The possible values are:
PagedView.LeftToRightItems with lesser indexes are positioned to the left of the current item and items with greater indexes to the right.This is the default.
PagedView.RightToLeftItems with lesser indexes are positioned to the right of the current item and items with greater indexes to the left.PagedView.TopToBottomItems with lesser indexes are positioned above the current item and items with greater indexes below.PagedView.BottomToTopItems with lesser indexes are positioned below the current item and items with greater indexes above.
The minimum distance from the press position a view has to be dragged before it will start dragging.
When the view starts moving because of a drag it will steal mouse grab from child items, so it is important that this threshold is not less than that any child items which also recognize drag gestures on the same axis. Likewise a parent item with a smaller drag threshold may steal gestures that logically belonged to this view. Only consider increasing this above the default value of Theme::startDragDistance if the view is known to have no ancestor items which also recognize drag gestures.
The horizontal alignment of items relative to the view's contentItem. The aligned position of items being dragged horizontally will be offset by the amount dragged.
The possible values are PagedView.AlignLeft, PagedView.AlignHCenter and PagedView.AlignRight. By default items are center aligned.
Determines whether view navigation will wrap at its end points.
The possible values are:
PagedView.NoWrapNavigation is stopped at both ends. It is not possible to pull an item before the first in the model or after the last into view.PagedView.WrapBeginNavigation is asymmetric and wraps from the first item to the last but not from the last to the first.PagedView.WrapEndNavigation is asymmetric and wraps from the last item to the first but not from the first to the last.PagedView.WrapNavigation wraps at both ends. The last item will be pulled in from before the first, and the first item will be pulled in after the last.This is the default.
/*!
The horizontal distance between adjacent items in the view.
Whether the user can switch between items in the view by dragging. If true (the default) dragging the view will pull an adjacent item into view, and if false dragging will do nothing.
The model containing the item data to display in the view.
As with other item views this may be a C++ QAbstractItemModel implementation, a ListModel, a DelegateModel, an ObjectModel, a Javascript array, or an item count.
The minimum distance an item in the view has to have beeen dragged from its stationary position for it to be replaced as the current item by an adjacent item when the drag is ended.
The duration of page move animation.
Page changes triggered by a flick may complete in less time than this.
Whether the current item is being moved by a drag gesture or an animation.
The vertical alignment of items relative to the view's contentItem. The aligned position of items being dragged vertically will be offset by the amount dragged.
The possible values are PagedView.AlignTop, PagedView.AlignVCenter and PagedView.AlignBottom. By default items are center aligned.
Determines whether view navigation will wrap at its end points.
The possible values are:
PagedView.NoWrapNavigation is stopped at both ends. It is not possible to pull an item before the first in the model or after the last into view.PagedView.WrapBeginNavigation is asymmetric and wraps from the first item to the last but not from the last to the first.PagedView.WrapEndNavigation is asymmetric and wraps from the last item to the first but not from the first to the last.PagedView.WrapNavigation wraps at both ends. The last item will be pulled in from before the first, and the first item will be pulled in after the last.This is the default.
/*!
The horizontal distance between adjacent items in the view.
Attached Property Documentation
The height of the contentItem of the page view an item belongs to.
The width of the contentItem of the page view an item belongs to.
PagedView.view : PagedView |
The page view an item belongs to.