如何在滚动时滑动 ToolBar up/down？

Question

我确定对此有一个简单的答案，但我正在努力寻找它。我正在尝试做的是基于 ListView 元素的滚动（或在移动平台中滑动）的 ApplicationWindow 内的 header 的简单滑动行为。

目的是在垂直滑动 ListView 的同时向上或向下滑动 ToolBar。

这是一个例子：

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1

ApplicationWindow {
    id: mainWindow
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    header: 
        RowLayout {
            height: 30
            ToolBar {
                id: toolBar
                anchors.fill: parent
                ToolButton {
                    id: toolBtn
                    width: parent.height
                    height: width
                }
                Text {
                    id: toolBarText
                    text: qsTr("Toggle hide/show when scroll")
                    anchors.fill: parent
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                        font.pixelSize: 25
                }
            Behavior on y {
                NumberAnimation {
                    //Does not work
                }
            }
        }
    }
    ListModel {
        id: myModel
        Component.onCompleted: {
            for(var i = 0; i <= 100; ++i) {
                myModel.append({pos: i})
            }
        }
    }
    ListView {
        anchors.fill: parent
        spacing: 16
        anchors.top: mainWindow.header.bottom
        model: myModel
        delegate: Rectangle {
            width: parent.width
            height: 50
            border.color: 'black'
            Text {
                text: pos
                anchors.centerIn: parent
            }
        }
        onFlickingVerticallyChanged: {
            //Does not work
            toolBar.y = toolBar.height * (-1)
        }
    } 
}

如您所见，我尝试更改垂直位置 onFlickingVerticallyChanged 并在其上设置 NumberAnimation 但我认为这是固定在主 window.

我们将不胜感激。

Answer 1

您可以使用 ListView::headerPositioning:

import QtQuick 2.7
import QtQuick.Controls 2.0

ApplicationWindow {
    id: window
    width: 320
    height: 480
    visible: true

    ListView {
        model: 100
        anchors.fill: parent
        delegate: ItemDelegate {
            text: "Item #" + index
        }

        headerPositioning: ListView.PullBackHeader
        header: ToolBar {
            width: parent.width
            z: 2 // above the delegate items
        }
    }
}

如何在滚动时滑动 ToolBar up/down？

How to slide ToolBar up/down while scrolling?

qt

qml

qtquick2

qtquickcontrols2