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.