QML - 不是從一個函數

Question

我是一個beginer和我沒有得到如何在我的QML調用canvas.requestPaint（）能夠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

在另一個範圍內，您的編號爲canvas1，因爲製表符類型爲Component，因此對於TabView，ID不一定是唯一的。它可能被多次實例化。

我幾乎沒有TabView的經驗，所以可能有另一種解決方案。然而，我會在我觸發的TabView中聲明一個信號：refresh，只要我想重畫。

然後我會使用一個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 
    } 
}