QML - Not able to canvas.requestPaint() from a function

Question

I am a beginer and i am not getting how to call canvas.requestPaint() in My QML ,Code is below:

//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
    }
}

When i try to use in onCurrentIndexChanged, I am getting the following error:

ReferenceError: canvas1 is not defined.

Please Suggest.

Answer 1

You have the id canvas1 in another scope, as the tab-style is a Component and the ID therefore not necessarily unique for the TabView. It might be instantiated multiple times.

I have little experience with the TabView, so there might be another solution. I however would declare a signal: refresh in the TabView which I trigger, whenever I want to repaint.

Then I'd use a Connections-element within the Canvas to connect to this signal to execute the repaint

Example:

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
    }
}