使用三个简单的页面做测试:分别是红、黄、绿。
import QtQuick 2.6
import QtQuick.Controls 1.4
import QtQuick.Window 2.2
import Material 0.1 as Material
import Material.ListItems 0.1 as ListItem
//源码参考:
// onPrimaryColorChanged: Theme.primaryColor = primaryColor
// onPrimaryDarkColorChanged: Theme.primaryDarkColor = primaryDarkColor
// onAccentColorChanged: Theme.accentColor = accentColor
// onBackgroundColorChanged: Theme.backgroundColor = backgroundColor
// onTabHighlightColorChanged: Theme.tabHighlightColor = tabHighlightColor
Material.ApplicationWindow{
visible: true
id:demo
theme {
//Material定义的颜色数组别名列表 [颜色][别名(深度)]
//前景色
primaryColor: Material.Palette.colors["blue"]["400"]
//未知
primaryDarkColor: Material.Palette.colors["red"]["A700"]
//未知
accentColor: Material.Palette.colors["red"]["A700"]
//tab子控件的高亮色
tabHighlightColor: Material.Palette.colors["lime"]["A700"]
}
property var txt: ["page1","page2","page3"];
property var mycomponets2:[
{page:page_1,m_color:"red"},
{page:page_1,m_color:"yellow"},
{page:page_1,m_color:"green"},
]
initialPage: Material.Page{
id:page
title:"demo"
tabs:txt
// backAction 定义菜单
backAction: navigattion.action
Material.NavigationDrawer{
id:navigattion;
onActionChanged: {
console.log("chan gge")
}
}
onSelectedTabChanged: {
console.log(selectedTab)
loader.visible=true;
}
Loader{
anchors.fill: parent
id:loader
visible: false
sourceComponent: mycomponets2[page.selectedTab].page
}
}
Component{
id:page_1
Rectangle{
width: 500
height: 500
color:mycomponets2[page.selectedTab].m_color
}
}
}
不是很好,组件中3个界面在初始化的时候就被加载了,改良下
onSelectedTabChanged: {
console.log(selectedTab)
loader.sourceComponent=null;//清除之前sourceComponent的内存
loader.sourceComponent=mycomponets2[page.selectedTab].page;
}
Loader{
id:loader
onLoaded: {
console.log("Init onLoaded");
}
anchors.fill: parent
// visible: false
// sourceComponent: mycomponets2[page.selectedTab].page
}
}
}
loader在切换sourceComponent时,不会自动清理掉之前使用过的内存,在下次加载时候,不会再次申请那些内存,如果经常切换sourceComponent,可以把loader.sourceComponent=null
注释掉。