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 scroll ListView from code in QML

How to scroll ListView from code in QML

Scheduled Pinned Locked Moved Solved QML and Qt Quick
2 Posts 1 Posters 3.5k 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.
  • M Offline
    M Offline
    Mihaill
    wrote on 21 Sept 2019, 15:44 last edited by
    #1

    Hi!
    How to scroll ListView from code in QML?

    1 Reply Last reply
    0
    • M Offline
      M Offline
      Mihaill
      wrote on 21 Sept 2019, 16:51 last edited by
      #2

      its work:

      import QtQuick 2.7
      import QtQuick.Window 2.2
      import QtQuick.Controls 2.0
      
      Window {
          id: demo
          width: 800
          height: 600
          visible: true
          color: "#ff303030"
      
          property color accentColor: "#ff00b374"
      
          Rectangle {
              width: parent.width/2-32
              height: parent.height-32
              x: 16
              y: 16
      
              color: accentColor
              clip: true
              ListView {
                  id: listView
                  width: parent.width
                  height: parent.height
      
                  // When scroll end align to the nearest item
                  snapMode: ListView.SnapToItem
                  // Clip painting to his own bounding rectangle to avoid display
                  // data outside specified size during flick
                  clip: true
                  model: 100
      
                  // Increase Flick speed
                  maximumFlickVelocity: 10000
                  cacheBuffer:1000
      
                  ScrollBar.vertical: ScrollBar {
                      id: verticalScrollBar
                      active: pressed || listView.moving || listUp.pressed || listDown.pressed
                      orientation: Qt.Vertical
                      opacity: active ? 1:0
                      Behavior on opacity {NumberAnimation {duration: 500}}
      
                      contentItem: Rectangle {
                          implicitWidth: 4
                          radius:2
                          implicitHeight: parent.height
                          color: accentColor
                      }
                  }
      
                  delegate: Rectangle {
                      id: lineRectangle
                      height: 32
                      width: listView.width
      
                      // Change color based on index number for better readability
                      color: (index & 1)? "#ffefefef" : "#ffffffff"
      
                      Text {
                          id: textField
                          height: parent.height
                          width: parent.width
                          color: listView.currentIndex === index? accentColor:"#ff000000"
                          font.pixelSize: 16
                          horizontalAlignment : Text.AlignHCenter
                          text: "Element " + (index+1)
                      }
                  }
              }
          }
      
          // Up Button to move list up
          Rectangle {
              id: upButton
      
              height: 256
              width: height//parent.width
              radius: height/2
      
              x: parent.width*3/4-width/2
              y: parent.height*1/4-height/2
      
              color: "#ffffffff"
      
              Text {
                  text: "Up"
                  anchors.centerIn: parent
                  color: listUp.pressed? demo.accentColor: "#ff000000"
                  font.pixelSize: 64
              }
      
              MouseArea {
                  anchors.fill: parent
                  id: listUp
      
                  SmoothedAnimation {
                      target: listView
                      property: "contentY"
                      running: listUp.pressed
                      velocity: 1000
                      to: 0
                  }
                  onReleased: {
                      if (!listView.atYBeginning)
                          listView.flick(0, 1000)
                  }
              }
          }
      
          // Down Button to move list down
          Rectangle {
              id: downButton
              height: upButton.height
              width: upButton.width
              radius: upButton.radius
              color: upButton.color
      
              x: parent.width*3/4-width/2
              y: parent.height*3/4-height/2
      
              Text {
                  text: "Down"
                  anchors.centerIn: parent
                  color: listDown.pressed? demo.accentColor: "#ff000000"
                  font.pixelSize: 64
              }
      
              MouseArea {
                  anchors.fill: parent
                  id: listDown
      
                  SmoothedAnimation {
                      target: listView
                      property: "contentY"
                      running: listDown.pressed
                      to: listView.contentHeight - listView.height
                      velocity: 1000
                  }
                  onReleased: {
                      if (!listView.atYEnd)
                          listView.flick(0, -1000)
                  }
              }
          }
      }
      
      
      1 Reply Last reply
      0

      1/2

      21 Sept 2019, 15:44

      • Login

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