How to scroll QML list view to particular set of items

See more:

ListView

Hi,

I have a Qml list view with Left, Right Scrolling Buttons and that can display 7 items at a time. The ListView orientation is Horizontal.

What I expect to achieve is: assume there are in total 12 items in the list
1)If User has not selected any list item then default selected list item will be 0, in this case if user presses on Right Scroll Button the list current index should jump to 11 i.e to the last item. And if user presses on the Left scroll button then list current index should jump to 0 i.e to the first item in list.
2)If user has selected any of the list item i.e user has selected item 7 and exited from the screen and when comes back to change the selection the list view will be scrolled & highlighted to the selected item i.e 7 and now when he presses on Right arrow it should show the remaining list items i.e items available after the selected item.

I am posting code for understanding

What I have tried:

<pre>ListView {
        id: listView

        property int nButtons: 7
        property int nPages: Math.ceil(count / nButtons)
        property int currentPage: Math.floor(currentIndex  / nButtons) + 1

        function scrollLeft() {
            if (currentPage > 1) {
                console.log("IF_BEFORE::CURRENTPAGE::"+currentPage+"::nPages:"+nPages+"::currentIndex::"+currentIndex+"nButtons::"+nButtons)
                currentIndex = (nButtons * (currentPage - 1)) - nButtons
                console.log("IF_AFTER::CURRENTPAGE::"+currentPage+"::nPages:"+nPages+"::currentIndex::"+currentIndex+"nButtons::"+nButtons)
            } else {
                currentIndex = 0
            }
        }

        function scrollRight() {
            if(currentPage <= nPages)
            {               console.error("RIGHT_BEFORE::CURRENTPAGE::"+currentPage+"::nPages:"+nPages+"::currentIndex::"+currentIndex+"nButtons::"+nButtons)
var newIndex = ((currentPage + 1) * nButtons) - 1//20(7)
currentIndex = newIndex > count - 1 ? count - 1 : newIndex
console.error("RIGHT_IF::CURRENTPAGE::"+currentPage+"nPages:"+nPages+"newIndex::"+newIndex+"currentIndex::"+currentIndex+"nButtons::"+nButtons)
            }

        anchors.left: leftScrollButton.right
        anchors.right: rightScrollButton.left
        anchors.leftMargin: root.spec.listViewSpec.leftMargin
        anchors.rightMargin: root.spec.listViewSpec.leftMargin
        anchors.bottom: parent.bottom
        height: root.spec.delegateBtnSpec.size.height

        orientation:ListView.Horizontal
        interactive: false
        currentIndex: root.selectedItemIndex
        highlightMoveDuration: 500
        highlightMoveVelocity: -1
        clip: true

        delegate: FixedButton {
            spec: root.spec.delegateBtnSpec
            property var imageKey : key
            property var btnText: text
            property int delegateIndex: index
            property string widgetUrl: componentName
            height: root.spec.delegateBtnSpec.size.height
            width: root.spec.delegateBtnSpec.size.width

            state: pressed ? 'active' : (checked ? 'selected' : 'standard')
            checked: root.selectedItemIndex === index

            Caption {
                id:idtext

                anchors.top: icon.bottom
                anchors.topMargin: -10
                anchors.horizontalCenter: parent.horizontalCenter
                width: parent.width * 0.85

                text: parent.btnText
                font: Theme.fonts.motorwaySemibold18Up
                color: parent.pressed || parent.checked ? Theme.colors.white : Theme.colors.grayColor
                elide: Text.ElideNone
                lineHeight: 0.6
                horizontalAlignment: Text.AlignHCenter
                maximumLineCount: 2
                wrapMode: Text.Wrap
            }

            onClicked: {
                if(root.isLeftSelected === true ) {
                    root.widgetUrl = "widgets/left-widgets/" + widgetUrl + ".qml"
                } else {
                    root.widgetUrl = "widgets/right-widgets/" + widgetUrl + ".qml"
                }
                root.selectedItemIndex = listView.currentIndex = index
                root.btnClicked()
                }

            onPressAndHold: {
                root.btnPressandHold()
            }
        }
    }

The current Left & Right Scroll Logic that i have implemented in the code are working as per the expectation if the list item displays 14 items i.e (0-13) but if the items are more than 14 the expected behavior no 2 from my expectations is not getting satisfied.

What is happening is if the user selected 7th item and exited from the screen and when he comes back he could see the list will be scrolled to 7th item and the same will be highlighted and now when he presses on Right scroll button the list current index is jumping to the last item index in the list. In expectation it should show next 6 items along with the selected item as the list can show only 7 items at a time.

I am unable to correct the logic of right and left scroll if the items are more than 14 i.e no of list pages becomes 3.

Requesting your help for the same.
Thanks in advance.