QML - Pas en mesure de canvas.requestPaint() d'une fonction

Question

Je suis débutante et je ne reçois pas comment appeler canvas.requestPaint() Mon QML, le code est ci-dessous:

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

Quand j'essaie d'utiliser dans onCurrentIndexChanged, je reçois l'erreur suivante:

ReferenceError: canvas1 is not defined.

S'il vous plaît Suggest.

Answer 1

Vous avez l'ID canvas1 dans un autre champ, car le style de tabulation est un Component et l'ID n'est donc pas nécessairement unique pour le TabView. Il pourrait être instancié plusieurs fois.

J'ai peu d'expérience avec le TabView, donc il pourrait y avoir une autre solution. Je voudrais cependant déclarer un signal: refresh dans le TabView que je déclenche, chaque fois que je veux repeindre.

Puis j'utiliser un Connections -Element au sein de l'Canvas se connecter à ce signal pour exécuter le repaint

Exemple:

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