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
Forum Updated to NodeBB v4.3 + New Features

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

      2/2

      21 Sept 2019, 16:51

      • Login

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