How to display set of items in List View with Scrolling
-
Hi, I am trying to construct a List View with Left and Right scroll buttons. The List View should display 7 items at a time, the should satisfy mainly two behaviors
1)If List view is displaying items from 0-6(i.e first 7) then on press of Right Scroll button it should display next set of 7 items (i.e next 7), similarly on press Left Scroll button it should display previous set of items.
2)And If user has selected any list item and exits from the List View screen again if he comes back the list should retain the last selected list item and if the user presses Right Scroll button it should display 7 items along with the selected one and vice versa for Left Scroll Button.
My Implementation is as follows
List ModelListElement { text: qsTr("1") key : "none" componentName : "" } ListElement { text: qsTr("2") key : "none" componentName : "" } . . . . . ListElement { text: qsTr("17") key : "none" componentName : "" } /*Total 17 elements were there in List Model the elements might increase or decrease*/
ListView.Widgets.qml
property bool isLeftScrollBtnEnabled: !listView.atXBeginning property bool isRightScrollBtnEnabled: !listView.atXEnd ListView { id: listView property int nButtons: 7 property int nPages: Math.ceil(count / nButtons) property int currentPage: Math.floor(currentIndex / nButtons) + 1 function scrollLeft() { /*Function that gets called on press of Left Scroll Button*/ if (currentPage > 1) { currentIndex = (nButtons * (currentPage - 1)) - nButtons } else { currentIndex = 0 } } function scrollRight() { /*Function that gets called on press of Right Scroll button if(currentPage <= nPages) { //console.log("BEFORE::CURRENTPAGE::"+currentPage+"::nPages:"+nPages+"::newIndex::"+newIndex+"::currentIndex::"+currentIndex+"nButtons::"+nButtons) var newIndex = ((currentPage + 1) * nButtons) - 1 currentIndex = newIndex > count - 1 ? count - 1 : newIndex //console.log("IF::CURRENTPAGE::"+currentPage+"nPages:"+nPages+"newIndex::"+newIndex+"currentIndex::"+currentIndex+"nButtons::"+nButtons) } } orientation:ListView.Horizontal interactive: false currentIndex: root.selectedItemIndex highlightMoveDuration: 500 highlightMoveVelocity: -1 clip: true onClicked: { if(root.isLeftSelected === true ) { root.widgetUrl = "widgets/left-widgets/" + widgetUrl + ".qml" } else { root.widgetUrl = "widgets/right-widgets/" + widgetUrl + ".qml" } console.log(":Before:Index::"+index+"::ListView.currentIndex::"+listView.currentIndex+"::root.selectedItemIndex::"+root.selectedItemIndex) root.selectedItemIndex = listView.currentIndex = index root.btnClicked() console.log(":After:Index::"+index+"::ListView.currentIndex::"+listView.currentIndex+"::root.selectedItemIndex::"+root.selectedItemIndex) } Rectangle { id:LeftScrollButton width:30 height:30 enable:isLeftScrollBtnEnabled onClicked:{ listView.scrollLeft() } } } Rectangle { id:RightScrollButton width:30 height:30 enable:isRightScrollBtnEnabled onClicked:{ listView.scrollRight() } } /*I am enabling and disabling the Left and Right Arrow when list view reach it's X starting position or ending position as there will be no more items to show*/
The right scroll function is working as expected if the total no of list items are 12, but if the list items are 18 then if user selects and a list items and he comes back again to the list view screen it is highlighting the last selected list item on press of Right scroll button the list is jumping to last index i.e 17.
->If user has not customized his selection the by default 0th item will be highlighted and on press of Right button list should show previous/next set of 7 item
->I unable to find out how to show the previous/next set of items including the selected item.
Can some one please help me here.
Thanks in advance.
Regard's,
Rohith.G