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