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. Flick ListView with mouse wheel
Forum Updated to NodeBB v4.3 + New Features

Flick ListView with mouse wheel

Scheduled Pinned Locked Moved Solved QML and Qt Quick
3 Posts 2 Posters 530 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.
  • F Offline
    F Offline
    felsi
    wrote on last edited by felsi
    #1

    I switched from qt 6.3. to 6.7 and recognized, that the default behavior for mouse wheel scrolling of ListViews changed.
    Now, it scrolls without flicking.
    I was about to ask how to restore the flicking, but i found the solution.
    And i thought, why not post.

    import QtQuick
    import QtQuick.Controls
    
    WheelHandler{
        id: root_item
    
        property int speed: 5
        property Flickable flickable: parent.parent
    
        onWheel: (event) => {
    
            if(flickable.visibleArea.yPosition < 0 ||
               flickable.visibleArea.yPosition > (1.0-flickable.visibleArea.heightRatio))
            {
                return;
            }
    
            let scroll_flick = event.angleDelta.y * speed;
            if(scroll_flick>=0)
            {
                if(flickable.verticalVelocity<=0)
                {
                    let flick_y = scroll_flick - flickable.verticalVelocity;
                    flickable.flick(0, flick_y);
                    return;
                }
                else
                {
                    flickable.cancelFlick();
                    return;
                }
            }
            else
            {
                if(flickable.verticalVelocity>=0)
                {
                    let flick_y = scroll_flick - flickable.verticalVelocity;
                    flickable.flick(0, flick_y);
                    return;
                }
                else
                {
                    flickable.cancelFlick();
                    return;
                }
            }
        }
    }
    

    Just use it on a ListView.

    F 1 Reply Last reply
    0
    • F felsi has marked this topic as solved on
    • F felsi

      I switched from qt 6.3. to 6.7 and recognized, that the default behavior for mouse wheel scrolling of ListViews changed.
      Now, it scrolls without flicking.
      I was about to ask how to restore the flicking, but i found the solution.
      And i thought, why not post.

      import QtQuick
      import QtQuick.Controls
      
      WheelHandler{
          id: root_item
      
          property int speed: 5
          property Flickable flickable: parent.parent
      
          onWheel: (event) => {
      
              if(flickable.visibleArea.yPosition < 0 ||
                 flickable.visibleArea.yPosition > (1.0-flickable.visibleArea.heightRatio))
              {
                  return;
              }
      
              let scroll_flick = event.angleDelta.y * speed;
              if(scroll_flick>=0)
              {
                  if(flickable.verticalVelocity<=0)
                  {
                      let flick_y = scroll_flick - flickable.verticalVelocity;
                      flickable.flick(0, flick_y);
                      return;
                  }
                  else
                  {
                      flickable.cancelFlick();
                      return;
                  }
              }
              else
              {
                  if(flickable.verticalVelocity>=0)
                  {
                      let flick_y = scroll_flick - flickable.verticalVelocity;
                      flickable.flick(0, flick_y);
                      return;
                  }
                  else
                  {
                      flickable.cancelFlick();
                      return;
                  }
              }
          }
      }
      

      Just use it on a ListView.

      F Offline
      F Offline
      felsi
      wrote on last edited by
      #2

      Posted to fast, sry...
      A more elegant version:

      import QtQuick
      
      WheelHandler{
          id: root_item
      
          property int speed: 5
          property Flickable flickable: parent.parent
      
          onWheel: (event) => {
      
              let scroll_flick = event.angleDelta.y * speed;
      
              if(flickable.verticalOvershoot != 0.0 ||
                (scroll_flick>0 && (flickable.verticalVelocity<=0)) ||
                (scroll_flick<0 && (flickable.verticalVelocity>=0)))
              {
                  flickable.flick(0, (scroll_flick - flickable.verticalVelocity));
                  return;
              }
              else
              {
                  flickable.cancelFlick();
                  return;
              }
          }
      }
      
      
      1 Reply Last reply
      0
      • C Offline
        C Offline
        calvinhxx
        wrote on last edited by calvinhxx
        #3

        awsome bro !!!!
        it`s usefull for srcoll horizental listview by mouse wheel

        ListView {
            id: root
        
            clip: true
            model: [1,1,1,1,1,1,1,1,1,1,1]
            orientation: ListView.Horizontal
            spacing: 10
        
            ScrollBar.horizontal: ScrollBar {}
        
            MouseArea {
                property int speed: 5
                anchors.fill: parent
                onWheel: (event) => {
                             let scroll_flick = event.angleDelta.y * speed;
                             if(root.horizontalOvershoot !== 0.0 ||
                                (scroll_flick>0 && (root.horizontalVelocity <=0)) ||
                                (scroll_flick<0 && (root.horizontalVelocity >=0)))
                             {
                                 root.flick((scroll_flick - root.horizontalVelocity), 0);
                                 return;
                             }
                             else
                             {
                                 root.cancelFlick();
                                 return;
                             }
                         }
            }
        }
        
        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