How to detect scroll event on a TableView in qml? - qt

Question

How can we on a TableView from QtQuick.Controls 2.2 detect a scroll event?
For exemple when i scroll down vertically i want to detect that event with something like onVerticalDown or something similar…
In attachment i provide na exemple of what i'm implementing:
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.1
ApplicationWindow {
id: window
title: "Stack"
visible: true
width: 300
ListModel {
id: libraryModel
ListElement {
title: "A Masterpiece"
author: "Gabriel"
}
ListElement {
title: "Brilliance"
author: "Jens"
}
ListElement {
title: "Outstanding"
author: "Frederik"
}
ListElement {
title: "Outstanding"
author: "Frederik"
}
ListElement {
title: "Outstanding"
author: "Frederik"
}
ListElement {
title: "Outstanding"
author: "Frederik"
}
ListElement {
title: "Outstanding"
author: "Frederik"
}
ListElement {
title: "Outstanding"
author: "Frederik"
}
ListElement {
title: "Outstanding"
author: "Frederik"
}
ListElement {
title: "Outstanding"
author: "Frederik"
}
ListElement {
title: "Outstanding"
author: "Frederik"
}
ListElement {
title: "Outstanding"
author: "Frederik"
}
ListElement {
title: "Outstanding"
author: "Frederik"
}
ListElement {
title: "Outstanding"
author: "Frederik"
}
ListElement {
title: "Outstanding"
author: "Frederik"
}
ListElement {
title: "Outstanding"
author: "Frederik"
}
ListElement {
title: "Outstanding"
author: "Frederik"
}
}
Page {
id: page
anchors.fill: parent
TableView{
id:table
anchors{
top:parent.top
topMargin:10
left:parent.left
right:parent.right
bottom:parent.bottom
}
style: TableViewStyle{
backgroundColor : "white"
textColor: "white"
highlightedTextColor: "white"
handle: Rectangle {
implicitWidth: 30
implicitHeight: 30
color: "black"
}
}
model: libraryModel
headerDelegate: Rectangle{
id:recHeader
width:styleData.width+20
height:30
color:"blue"
border.color: "black"
border.width: 1
Text {
anchors.fill:parent
text:styleData.value
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
itemDelegate: Rectangle {
border.color:"black"
border.width: 1
Text
{
text: styleData.value
elide: Text.ElideRight
}
}
Component.onCompleted: {
showcolumn1()
}
TableViewColumn {
id: col1
role: "title"
title: "Title"
}
TableViewColumn {
role: "author"
title: "Authors of this tutorial"
}
}
}
}
When we run it's like this:
Now i scroll down and i want to detect it:
How can this be done?

Answer 1

You can access the scroll position on the flickableItem.contentY property:
TableView {
flickableItem.onContentYChanged: console.log("scrolled:", flickableItem.contentY)
// ...
}