[Solved] Unable to get PathLine/PathView to display sufficient items
-
Hi,
I am trying to customise the page control example published on "forum nokia wiki":http://wiki.forum.nokia.com/index.php/How_to_create_a_Page_Control_component_in_QML. The article describes how to use PathView/PathLine to create pagination effect.
I am trying to customize this example to something like the screenshot below.
!http://i53.tinypic.com/j0emn6.jpg(Screenshot)!
I have six ListModel items (rectangles) in total. I want to iterate through them. At any point of time I want to display 4 items (rectangles) on screen. The problem I have is I can only see 3 items at a time.
I am pretty sure this is a logic issue, but I could not understand PathView/PathLine concept enough to make it work. Could anyone take a look at my code and tell me where is the missing link.
Here is the key part of the code.
@
path: Path {
startX: pageControl.width / 2
startY: 100 * (1 - listModel.count) / 2 //100 is the height of each rectangle
PathLine {
x: pageControl.width / 2
y: 100 * (1 + listModel.count) /2 //100 is the height of each rectangle
}
}
@Here is the "full code":http://pastebin.com/rsEtjsRb
-
Hi,
The first item is vertically centered on the start point of the path, and in this case that is -250. That ends up putting 3 items off screen, and 3 items on. Have you tried defining a path that is only on screen (e.g. with startY at 50), and using pathItemCount to limit the number of items shown on the path?
Regards,
Michael -
Thanks Michael - I tried startX as -150.
!http://i53.tinypic.com/fuuxzd.png(Screenshot)!
I can now see 4 items but the list is starting at 6th item. So close.
Maybe I am unnecessarily complicating things. I have an XmlListModel and the number of items in the model changes dynamically. I have enough space to display 4 items on screen using a ListView/PageView. I would like to have some sort of paging control for the view so that user can click a button or use a key to go to next page. Dragging/kinetic-scrolling is not an option since this will be used in a maemo home screen widget and the touch controls do not work on home screen. This is the closest I got using a PageView. The ListView just extends beyond the screen which is not what I was looking for.
Is there any other way to implement paging?
-
Hi,
The reason 6 shows up first has to do with preferredHighlightBegin and preferredHighlightEnd. If you set them to something like 2/5 or 2/6 instead you should get the desired result.
I'd still suggest trying a shorter, on-screen only path along with pathItemCount as a preferred approach, however.
Regards,
Michael -
Finally, preferredHighlightBegin and preferredHighlightEnd did the trick.
I tried tweaking pathItemCount but assigning it added too much space between items and more items are pushed off screen. In some cases items were overlapping each other. The best scenario was pathItemCount = listMode.count which gives the same result as leaving pathItemCount unassigned. So I decided to leave it unassigned.
This is my modified PathView that is working.
@
PathView {
id: myPathViewwidth: parent.width
anchors.top: parent.top
anchors.bottom: pageIndicator.topKeys.onDownPressed: if (!moving && interactive) incrementCurrentIndex() Keys.onUpPressed: if (!moving && interactive) decrementCurrentIndex()flickDeceleration: 500
preferredHighlightBegin: 1/listModel.count
preferredHighlightEnd: 1/listModel.count
//pathItemCount: listModel.count
focus: true
interactive: true
model: listModel
delegate: appDelegate
path: Path {
startX: pageControl.width / 2
startY: -itemHeight/2
PathLine {
x: pageControl.width / 2
y: listModel.count * 100 - itemHeight/2
}
}
}
@Thanks a lot Michael!