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