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

Posted 2023-02-17

【中文标题】如何在 QML 中处理来自父 Flickable 的 gridview contentY 和 Y 位置

【英文标题】：How to handle gridview contentY , Y position from parent Flickable in QML

【发布时间】：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）

【参考方案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