在 QML 中获取对动态创建的 ChartView 的引用

Posted 2023-02-14

【中文标题】在 QML 中获取对动态创建的 ChartView 的引用

【英文标题】：Getting reference to dynamically created ChartView in QML

【发布时间】：2019-03-12 13:57:47

【问题描述】：

我正在尝试获取对动态创建的 ChartView 对象的引用。在代码中，您将看到我在单击“添加图表”按钮时动态创建了一个图表作为代表。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtCharts 2.3
import QtQuick.Controls 2.4

Window 
    visible: true
    width: 1200
    height: 800
    title: "Charts"

    ListModel 
        id: modelId
    

    Rectangle 
        id: rectId
        color: "pink"
        anchors.fill: parent

        GridView 
            id: mGridViewId
            anchors.fill: parent
            cellWidth: 300; cellHeight: 300
            model: modelId
            delegate: Rectangle 
                width: mGridViewId.cellWidth;
                height: mGridViewId.cellHeight
                color: mColor

                ChartView 
                    width: parent.width;
                    height: parent.height

                    LineSeries 
                        name: "LineSeries"
                        XYPoint  x: 0; y: 0 
                        XYPoint  x: 1.1; y: 2.1 
                        XYPoint  x: 1.9; y: 3.3  
                    

                
            
        
    

    Column 
        anchors.centerIn: parent
        Row 
            Button 
                text: "add chart"

                onClicked:                     
                   modelId.append('mColor': 'blue')
                
            


            Button 
                text: "remove chart"

                onClicked: 
                    modelId.remove(0)
                
            
        

        Button 
            anchors.horizontalCenter: parent.horizontalCenter
            text: "add line series"

            onClicked: 
                var chart = modelId.get(0)
                chart.removeAllSeries();
            
        

    

我可以使用以下方法获得对模型特定项目的引用：

var chart = modelId.get(0)

但它不被视为 Rectangle 或 ChartView。因此，如果我想做一些事情，比如将 LineSeries 添加到动态创建的图表之一，或者像这样删除 LineSeries：

onClicked: 
    var chart = modelId.get(0)
    chart.removeAllSeries();

我无法将该对象视为 QML 对象。我收到一个错误：

qrc:/main.qml:80: TypeError: 对象的属性“removeAllSeries” QObject(0x7fd35d996b50) 不是函数

我不确定我做错了什么，或者我是否需要以完全不同的方式解决这个问题，即不使用 ListView-Model-Delegate 而是动态创建一个 QML 对象并将对它们的引用存储在一个数组中.

感谢您的帮助，我很感激。

--E

【参考方案1】：

我想通了，在这里发布答案以供未来的书呆子使用。

我需要访问 GridView 的 contentItem 属性。我将此功能添加到 GridView

function getDelegateInstanceAt(index) 
    return contentItem.children[index];

并修改特定委托调用传递索引的函数

onClicked: 
    var chart = mGridViewId.getDelegateInstanceAt(2);
    chart.removeAllSeries();

【参考方案2】：

E，如果我理解这一点，你想调用你正在创建的单个 ChartView qml 对象的 removeAllSeries()。

但是……

modelId.get(0)

不是 ChartView qml 对象，它只是您添加的数据元素。 所以你得到的错误是有效的，因为你试图访问 ListModel 的属性

如果你这样做：

onClicked: 
    var chart = modelId.get(0)
    var color = chart.mColor
    console.log(color)
    // blue

您必须使用 GridView 的 currentItem 和/或 currentIndex 来找到正确的 ChartView 对象

onClicked: 
    //Gridview -> Rectangle -> ChartView -> method
    mGridViewId.currentItem.visibleChildren[0].removeAllSeries()

你可以去掉多余的 Rectangle 而不必处理 visibleChildren。