如何在qml中的T​​ableView上检测滚动事件？

Question

我们如何在QtQuick.Controls 2.2的TableView上检测滚动事件？

例如，当我垂直向下滚动时，我想使用类似onVerticalDown之类的东西来检测该事件……

在附件中，我没有提供我正在执行的示例：

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"
            }
        }
    }
}

运行时就像这样：

现在我向下滚动，我想检测它：

这怎么办？

Answer 1

您可以访问flickableItem.contentY属性上的滚动位置：

TableView {
    flickableItem.onContentYChanged: console.log("scrolled:", flickableItem.contentY)
    // ...
}