Loader组件的动态加载

使用三个简单的页面做测试:分别是红、黄、绿。

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注释掉。