Solved PageIndicator customization: interactive and with custom AND different indicator elements for each page
-
This question has also been asked on Stackoverflow but I'm thinking that due to its nature it would be more fruitful to do that here.
The background story is as follows: I've just started learning QML and currently am working on a minimalistic UI for demonstration purposes of a device. For the main view I've decided to use
SwipeView
since it has a really nice structure, has the gesture-driven feel (I'll also be adding gesture support to my application using 3D motion detection) and also it can be used together with thePageIndicator
, which supposedly can offer a very simplistic yet neat navigation. The mockup looks like this:
- Making
PageIndicator
's elements clickable and change page ofSwipeView
to respective index
The first thing that I've noticed was that the
interactive
property doesn't seem to work. I tried with a defaultPageView
without any modifications inside (except size of course) and 2-3 pages and aPageIndicator
(without even thedelegate
). The documentation states that this property is supposed to make thePageIndicator
's elements capable of acting upon being pressed that is change to the given page they are pointing at (unless we have more such elements than actual pages in theSwipeView
). I don't know if this is a bug or I'm simply don't get the way it works. I'm leaning towards the second since I'm pretty new to QML and also even when theinteractive
property is set totrue
one still has to bind thePageIndicator
to theSwipeView
it's supposed to control. If anyone knows how to fix this please do tell. Currently I'm actually using aMouseArea
and it'sonClicked
property inside thedelegate
of thePageIndicator
to do that.- Using custom
PageIndicator
elements (Image
components) for each page
Next thing I'd like to do is use
Image
components for each element inside thePageIndicator
. This will allow me to replace my current buttons that do the work of thePageIndicator
(but working with these proofs to be quite clunky since I need to make a lot of checks for the state of each button).Currently I have the following code for my
delegate
propertyPageIndicator { id: detailsViewIndicator // ... delegate: Image { // detailsView is the `SwipeView` that the `PageIndicator` controls source: detailsViewIndicator.indicatorIcons[detailsView.currentIndex] height: 30 width: 30 opacity: index === detailsView.currentIndex ? 0.95 : pressed ? 0.7 : 0.45 MouseArea { anchors.fill: parent onClicked: { if(index !== detailsView.currentIndex) { detailsView.setCurrentIndex(index); source = detailsViewIndicator.indicatorIcons[detailsView.currentIndex]; } } } } }
indicatorIcons
is alist<Image>
property containing three strings representing theQRC URL
s of three image I Have:- Indicator image for page 1 in
SwipeView
:
- Indicator image for page 2 in
SwipeView
:
- Indicator image for page 2 in
SwipeView
:
The result I'm aiming for is
[![enter image description here][2]][2]
however I get the following behaviour:
Swiping in the
SwipeView
(not clicking on thePageIndicator
) leads toand
This is only in one direction (index-wise from left to right). If I go backwards I get the same results but in the opposite order.
Clicking makes things more interesting. In the screenshot below I've clicked on the second page indicator item (with
qrc:/icons/qtlogo1.png
as source for theImage
) after the initialization:Next I clicked on the third page indicator item:
After some more clicking I got:
which is actually what I wanted to have to begin with.
This is obviously not how things should look and behave. A couple of questions concerning this issue:
-
Is it even possible to customize the
PageIndicator
to such an extent? Thedelegate
is there to support a customPageIndicator
element however initializes all such elements with just the specified first image that is passed onto thesource
property bysource = detailsViewIndicator.indicatorIcons[detailsView.currentIndex];
-
Is it possible to extract
list
elements and assign those todelegate
? I have tried doingdelegate: detailsViewIndicator.indicatorImages[detailsView.currentIndex]
where
indicatorImages
isproperty list<Image> indicatorImages: [ Image { source: "..." }, Image { source: "..." }, Image { source: "..." } ]
but I get
Unable to assign QQuickImage_QML_2 to QQmlComponent
error. I was literally unable to find anything on this whatsoever. The reason why I want to do that is to initialize my
Image
s once and after that just call them depending on the index that myPageIndicator
is currently at.Regards,
RB - Making
-
Problem solved. Check the Stackoverflow post for details. In short - I did the assignment of the images incorrectly plus didn't actually properly handle the changing of the index of both the
SwipeView
and thePageIndicator
.