QML - 无法从函数 canvas.requestPaint()

Question

我是初学者，我不知道如何在我的 QML 中调用 canvas.requestPaint()，代码如下：

//myTab.qml

TabView {
    id: tv
    width: parent.width
    height: parent.height
    antialiasing: true

    style: TabViewStyle {
        frameOverlap: -1

        tab: Rectangle {              
            color: "Transparent"
            implicitWidth: text1.width + 50
            implicitHeight: 20
            radius: 2
            smooth: true
            Canvas {
                id: canvas1
                anchors.fill: parent
                width: parent.width
                height: parent.height
                onPaint: {
                    styleData.selected ? drawTab(canvas1,"#0C3142") :
                                         drawTab(canvas1,"Transparent") //Some custom JS function to draw a object
                }                 

                Text {
                    id: text1
                    height: parent.height
                    verticalAlignment: Text.AlignVCenter
                    anchors.left : parent.left
                    anchors.leftMargin: 15
                    text: styleData.title
                    color: "white"
                }
            }
        }

        frame: Rectangle {
            width: parent.width
            height: parent.height
            color: "Transparent"
            border.color:"white"
        }
        tabBar: Rectangle {
            color: "Transparent"
            anchors.fill: parent
        }
    }

    Tab {
        id: tab1
        title: "Tab1"
    }
    Tab{
        id: tab2
        title: "Tab2"
    }

    onCurrentIndexChanged: {
        console.log("index changed "+currentIndex)
        canvas1.repaint() //ERRROR - not defind canvas1
    }
}

当我尝试在 onCurrentIndexChanged 中使用时，出现以下错误：

ReferenceError: canvas1 is not defined.

请建议。

Answer 1

您在另一个范围内有 ID canvas1，因为选项卡样式是 Component，因此 ID 对于 TabView 不一定是唯一的。它可能会被实例化多次。

我对 TabView 没有什么经验，因此可能还有其他解决方案。然而，我会声明一个信号：refresh 在我触发的 TabView 中，每当我想重新绘制时。

然后我会在 中使用 Connections 元素 Canvas 连接到此 signal 以执行 repaint

示例：

TabView {
    id: tv
    width: parent.width
    height: parent.height
    antialiasing: true

    signal refresh // *** DEFINE SIGNAL HERE

    style: TabViewStyle {
        frameOverlap: -1

        tab: Rectangle {
            color: "Transparent"
            implicitWidth: text1.width + 50
            implicitHeight: 20
            radius: 2
            smooth: true
            Canvas {
                id: canvas1
                anchors.fill: parent
                width: parent.width
                height: parent.height
                onPaint: {
                    styleData.selected ? drawTab(canvas1,"#0C3142") :
                                         drawTab(canvas1,"Transparent") //Some custom JS function to draw a object
                }

                function drawTab() { // *** I DONT KNOW WHAT SHOULD BE DONE HERE
                    console.log('do nothing')
                }

                // *** CONNECT TO SIGNAL HERE ***
                Connections {
                    target: tv
                    onRefresh: canvas1.requestPaint() // *** repaint is not a function.
                }

                Text {
                    id: text1
                    height: parent.height
                    verticalAlignment: Text.AlignVCenter
                    anchors.left : parent.left
                    anchors.leftMargin: 15
                    text: styleData.title
                    color: "white"
                }
            }
        }

        frame: Rectangle {
            width: parent.width
            height: parent.height
            color: "Transparent"
            border.color:"white"
        }
        tabBar: Rectangle {
            color: "Transparent"
            anchors.fill: parent
        }
    }

    Tab {
        id: tab1
        title: "Tab1"
    }
    Tab{
        id: tab2
        title: "Tab2"
    }

    onCurrentIndexChanged: {
        console.log("index changed "+currentIndex)
        refresh() // *** INVOKE SIGNAL HERE
    }
}