如何在 QML 中处理来自父 Flickable 的 gridview contentY 和 Y 位置答案

【问题标题】：How to handle gridview contentY , Y position from parent Flickable in QML如何在 QML 中处理来自父 Flickable 的 gridview contentY 和 Y 位置
【发布时间】：2017-12-08 01:49:06
【问题描述】：

我在 Flickable 中有一个 backGroundList 和顶部 gridview。

我想处理来自父 Flickable 的 gridview contentY 和 Y 位置，当我将 gridview 高度指定为内容高度时它正在工作，但由于内存问题我不想之前创建项目。

代码：

Flickable {
            id: mainFlickable
            width: 1920
            height: 1080
            contentHeight: gridView.contentHeight + 660 + 140 // topmargin + bottom margin

            ListView {
                id:backGroundList
                width: 1920
                height: 1080
                y: mainFlickable.contentY
                orientation: ListView.Horizontal

                MouseArea {
                    id: myMA12
                    anchors.fill: parent
                    hoverEnabled: true
                }
            }

            GridView {
                id: gridView
                objectName: "gridView"

                width: 1920
                height: 1080



                cellWidth: 372
                cellHeight: 290

                interactive: false
                 y: {
                    if (mainFlickable.contentY > 660)
                        return 660 + (mainFlickable.contentY - 660)
                    else
                        return 660
                }

                contentY: {
                    if (mainFlickable.contentY > 660){
                        return (mainFlickable.contentY - 660)
                    }
                    else {
                        return 0
                    }
                }

                delegate: Rectangle {
                    width: 352
                    height: 270
                    color: "blue"
                    opacity: 0.5

                    Text {
                        text: index
                        anchors.centerIn: parent
                    }
                }
                model:100
                anchors {
                    left: parent.left
                    leftMargin: 30
                    right: parent.right
                    rightMargin: 30
                }
            }
}

它没有按预期工作。 当我更新 Y 值时，ContentY 会自动更新为零

约束：Qt5.9.0

有人可以帮我解决这个问题吗？

【问题讨论】：

您能否提供一个快速的线框图，说明您希望您的 UI 是什么样子？让我们更深入地了解您的需求。我觉得您在将 2 Flickables 嵌套到 1 时走错了路（ListView 和 GridView 都继承自 Flickable）

标签： qt qml

【解决方案1】：

如果我理解正确，您希望有两个 ...Views 一个在另一个之上。当其中一个弹到最后时，您希望将 View 弹出窗口，让第二个出现并开始弹幕。

在我看来，用一个 Flickable 嵌套另外两个是无法完全实现的。

使用它们的兄弟Flickable 很容易实现。在我的示例代码中，我使用了两个 Flickable。一个用于控制contentY-properties，另一个负责在两个Views 之间滚动。后者可以通过使用 Item 来轻松、更有效地解决。

Window {
    id: rootWin
    width: 800; height: 600; visible: true

    Flickable {
        id: flck
        anchors.fill: parent
        contentHeight: lv1.height + lv2.height
        interactive: false
        contentY: Math.min(Math.max(0, mainFlick.contentY - lv1.contentHeight + lv1.height), contentHeight - height)

        ListView {
            id: lv1
            height: rootWin.height
            width: 100
            model: 90
            delegate: Rectangle {
                border.width: 1
                width: 100
                height: 50
                Text {
                    anchors.centerIn: parent
                    text: index
                }
            }
            interactive: false
            contentY: Math.min(mainFlick.contentY, contentHeight - height)
            onContentYChanged: console.log(contentY, contentHeight, height)
        }
        ListView {
            id: lv2
            height: rootWin.height
            anchors.top: lv1.bottom
            width: 100
            model: 90
            delegate: Rectangle {
                border.width: 1
                width: 100
                height: 50
                Text {
                    anchors.centerIn: parent
                    text: index
                }
            }
            interactive: false
            contentY: Math.min(Math.max(0, mainFlick.contentY - lv1.contentHeight), contentHeight - height)
        }
    }
    Flickable {
        id: mainFlick
        anchors.fill: parent
        contentHeight: lv1.contentHeight + lv2.contentHeight
    }
}

【讨论】：