qt qml中的Tabview使用心得

彩云之南的天是如此湛蓝，天上落下的水是如此清澈。

最近在qt5.5下使用TabView，如下。

1） currentIndex变量很好用，其对应当前被显示的tab,其值变化时还会触发onCurrentIndexChanged函数。

2）加载如下的qml文件时，例如用一个QquickView显示，tab1和tab2会被创建，一直到整个View被关闭时，才被销毁。

对于tab内定义的rectangle，当tab第一次被显示时，其才会被构建，直到View被关闭时，才被销毁。

下面这段代码的输出顺序：
tab2 has been finished  --- >tab1 has been finished  --- >tabview has been finished  --- > // 先建立tab,空的tab
Rectangle of tab1 has been finished --->  // 第一次显示时，指定了currentIndex:0，tab1内的控件先被生成
-->点击tab2-->Rectangle of tab2 has been finished--->当一个tab被第一次显示时，其内部的控件才被构建

--->onCurrentIndexChanged!!currentindex=1!!!---->被构建完了之后才调用的currentIndexchange槽函数

--->点击tab1-->onCurrentIndexChanged!!currentindex=0!!!

--->点击tab2-->onCurrentIndexChanged!!currentindex=1!!!

--->CloseView--> Rectangle of tab2 has been destructed --> Rectangle of tab1 has been destructed -->tab2 has been destructed!!-->tab1 has been destructed!!-->tabview has been destructed!!  //先销毁tab内的widege，然后销毁tab，最后销毁tabview

TabView
{
    id: tabview
    
    Component.onCompleted:{console.log("tabview has been finished!");}
    Component.onDestruction: console.log("tabview has been destructed!!")
    
    property var array:[] //define array 
    property bool flag: false
    x: 0 
    y: 0 
    width: 800 
    height: 900 
    currentIndex: 0//One TabView can contains many tabs， currentIndex = 0 means making the first tab be visiable and others unvisiable. 
    onCurrentIndexChanged: //when you choose different tabs by clicking, this slot function is called automatically.
    { //console.log("onCurrentIndexChanged!!!!!") 
        if(currentIndex==0)
        { 
            console.log("onCurrentIndexChanged!!currentindex=0!!!") 
        } 
        else if(currentIndex==1)
        { 
            console.log("onCurrentIndexChanged!!currentindex=1!!!") 
        } 
    } 
    Tab
    { 
        id:taba 
        title: "tab1" 
        Component.onCompleted:
        {
            console.log("tab1 has been finished!");
        } 
        Component.onDestruction: console.log("tab1 has been destructed!!") 
        Rectangle
        { 
            id: rect1
            
            Component.onCompleted:{console.log("Rectangle of tab1 has been finished!");}
            Component.onDestruction: console.log("Rectangle of  tab1 has been destructed!!")
            color:"steelblue"
        }
    }
    
    Tab
    { 
        id:tabb title: "tab2"
        Component.onCompleted:{console.log("tab2 has been finished!");}
        Component.onDestruction: console.log("tab2 has been destructed!!")    
        Rectangle
        { 
            id: rect2 
            Component.onCompleted:{console.log("Rectangle of tab2 has been finished!");} 
            Component.onDestruction: console.log("Rectangle of tab2 has been destructed!!") 
            color:"steelblue" 
        }
    }
}