Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to display set of items in List View with Scrolling
Forum Updated to NodeBB v4.3 + New Features

How to display set of items in List View with Scrolling

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
1 Posts 1 Posters 188 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • R Offline
    R Offline
    Rohith
    wrote on last edited by
    #1

    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 Model

    ListElement {
            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

    1 Reply Last reply
    0

    • Login

    • Login or register to search.
    • First post
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Get Qt Extensions
    • Unsolved