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. Wrapping the path view to beginning and end of view
Forum Updated to NodeBB v4.3 + New Features

Wrapping the path view to beginning and end of view

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
3 Posts 2 Posters 373 Views 2 Watching
  • 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.
  • S Offline
    S Offline
    Sridhar S L
    wrote on last edited by
    #1

    Hi,
    Im using a pathview to display 5 items out of 10 items from the model in curved path. And highlight is moving across the view so that it can move around 5 items, 0th to 4th index. Once I reach 4th item and if I press down button, items scroll up and highlight stays at the same position(behavior of path view). Similarly when I reach 9th index and press down button, I don't want to get the item 1 in the same position rather I want the highlight to be moved to item 1 and it should be displayed at the beginning of path view. So i tried to achieve it with below logic.

    property int previousCurrentIndex: 0
    onCurrentIndexChanged: {
    var lastIndex = listModel.count - 1
    if (currentIndex === 0 && previousCurrentIndex === lastIndex) {
    pathView.positionViewAtIndex(currentIndex, PathView.Beginning)
    }
    else if (currentIndex === lastIndex && previousCurrentIndex === 0) {
    pathView.positionViewAtIndex(currentIndex, PathView.End)
    }
    previousCurrentIndex = currentIndex
    }

    Though I realized the expected behavior with above snippet, it still not works as expected when I try to scroll further. Position of path view changing based on earlier position.

    Could anyone help me whether it is a correct approach or am I missing anything or really its a bug from Qt?

    J.HilkJ 1 Reply Last reply
    0
    • S Sridhar S L

      Hi,
      Im using a pathview to display 5 items out of 10 items from the model in curved path. And highlight is moving across the view so that it can move around 5 items, 0th to 4th index. Once I reach 4th item and if I press down button, items scroll up and highlight stays at the same position(behavior of path view). Similarly when I reach 9th index and press down button, I don't want to get the item 1 in the same position rather I want the highlight to be moved to item 1 and it should be displayed at the beginning of path view. So i tried to achieve it with below logic.

      property int previousCurrentIndex: 0
      onCurrentIndexChanged: {
      var lastIndex = listModel.count - 1
      if (currentIndex === 0 && previousCurrentIndex === lastIndex) {
      pathView.positionViewAtIndex(currentIndex, PathView.Beginning)
      }
      else if (currentIndex === lastIndex && previousCurrentIndex === 0) {
      pathView.positionViewAtIndex(currentIndex, PathView.End)
      }
      previousCurrentIndex = currentIndex
      }

      Though I realized the expected behavior with above snippet, it still not works as expected when I try to scroll further. Position of path view changing based on earlier position.

      Could anyone help me whether it is a correct approach or am I missing anything or really its a bug from Qt?

      J.HilkJ Offline
      J.HilkJ Offline
      J.Hilk
      Moderators
      wrote on last edited by J.Hilk
      #2

      @Sridhar-S-L simply set the currentIndex to 0 once it crosses over...

      Window {
          id:root
          visible: true
          width: 640
          height: 480
          title: qsTr("test")
      
      
          PathView {
              id: pathView
              anchors.fill: parent
      
              ListModel{
                  id:myModel
                  ListElement {name: "0"}
                  ListElement {name: "1"}
                  ListElement {name: "2"}
                  ListElement {name: "3"}
                  ListElement {name: "4"}
                  ListElement {name: "5"}
                  ListElement {name: "6"}
                  ListElement {name: "7"}
                  ListElement {name: "8"}
                  ListElement {name: "9"}
              }
      
              model: myModel
              delegate: Rectangle {
                  width: 50; height: 50
                  color: "red"
                  Text { text: index }
              }
              pathItemCount: myModel.count
              preferredHighlightBegin: 0.5
              preferredHighlightEnd: 0.5
      
              path: Path {
                              startX: 0; startY: height / 2
                              PathLine { x: width; y: height / 2 }
                          }
      
              onCurrentIndexChanged: {
                  if (currentIndex === pathItemCount - 1) {
                      currentIndex = 0;
                  }
              }
          }
      }
      

      Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


      Q: What's that?
      A: It's blue light.
      Q: What does it do?
      A: It turns blue.

      S 1 Reply Last reply
      0
      • J.HilkJ J.Hilk

        @Sridhar-S-L simply set the currentIndex to 0 once it crosses over...

        Window {
            id:root
            visible: true
            width: 640
            height: 480
            title: qsTr("test")
        
        
            PathView {
                id: pathView
                anchors.fill: parent
        
                ListModel{
                    id:myModel
                    ListElement {name: "0"}
                    ListElement {name: "1"}
                    ListElement {name: "2"}
                    ListElement {name: "3"}
                    ListElement {name: "4"}
                    ListElement {name: "5"}
                    ListElement {name: "6"}
                    ListElement {name: "7"}
                    ListElement {name: "8"}
                    ListElement {name: "9"}
                }
        
                model: myModel
                delegate: Rectangle {
                    width: 50; height: 50
                    color: "red"
                    Text { text: index }
                }
                pathItemCount: myModel.count
                preferredHighlightBegin: 0.5
                preferredHighlightEnd: 0.5
        
                path: Path {
                                startX: 0; startY: height / 2
                                PathLine { x: width; y: height / 2 }
                            }
        
                onCurrentIndexChanged: {
                    if (currentIndex === pathItemCount - 1) {
                        currentIndex = 0;
                    }
                }
            }
        }
        
        S Offline
        S Offline
        Sridhar S L
        wrote on last edited by
        #3

        @J-Hilk Thank you for the response.
        Based on your example, Highlight is kept constant at one position. But I want to scroll between the displayed items in view, set preferredHighlightBegin to 0 and preferredHighlightEnd to 0.85 by setting pathItemCount to 5 where my model contains 10 items. So basically when i press down key, highlight scrolls from index 0 to index 4 by moving the highlight y position (basically items are arranged vertically and in path view by having different x position for each item). Later if I still pressing down, highlight is staying in same position and path view content moves up. Following, after getting 9th index element on highlight and if down key is pressed, i dont want to get 0th item at same position, rather i want highlight should be moved to beginning of path view and 0th index item also should be displayed at top of path view.

        Similar to the behavior of List view which behaves based on keyNavigationWraps property.

        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