Qt之QML第三章Component与Loader

6 QML-组件Component、Loader

6.1Component

可以用来封装控件
用法1：两个基础函数在窗口生成和释放的时候打印信息
示例代码

Component.onCompleted: { //在窗口生成的时候自动运行打印信息
        console.log("onCompleted")
    }
    Component.onDestruction: { //在窗口销毁的时候调用打印信息
        console.log("onDestruction")
    }

6.2Loader延时加载控件

调用封装的控件
Loader:延时加载控件
asynchronous：//设置异步属性，如果控件还在加载，可以先显示其他东西显示正在加载
loader.item：在控件加载完成后想要对他的属性进行更改使用loader.item
loader.item.paused = !loader.item.paused //控制是否播放当前动画
AnimatedImage：加载动图
Image：加载图片

   Component{
       id:com
       Rectangle{
           id:rect
           width: 200
           height: 100
           color: "black"
       }
   }

   Loader{ //延时加载控件
        id:loader
        source: "/MyRectangle.qml" //加载已有控件路径
        asynchronous: true   //设置异步属性，如果控件还在加载，可以先显示其他东西显示正在加载
        sourceComponent: com   //调用上面Component绘制的控件 也就是调用封装的控件
        onStatusChanged: {
            console.log("status",status)
        }
        Component.onCompleted: { //在窗口生成的时候自动运行打印信息
            console.log("onCompleted")
        }
        Component.onDestruction: { //在窗口销毁的时候调用打印信息
            console.log("onDestruction")
        }
    }

    Button{
        width: 50
        height: 50
        x:200
        onClicked: {
            //在控件加载完成后想要对他的属性进行更改使用loader.item
            loader.item.width = 50
            loader.item.height = 50
            loader.item.color = "red"
            loader.item.paused = !loader.item.paused //控制是否播放当前动画
            //loader.sourceComponent = null  //调用销毁打印
        }
    }

    Component{ //如果不用Component的会直接显示，使用loader调用之后才会显示
        id:com2
        Image { //这个只能加载图片不能加载动图
            id: img
            source: "file" //加载图片路径
            width: 200  //改变图片大小
            height: 200
        }
    }

    Component{ //如果不用Component的会直接显示
        id:com3
        AnimatedImage { //加载动图
            id: img
            source: "file" //加载动图路径
            speed: 10 //控制动图10倍速度加载动图 这个是QtQuick 2.11引入的
        }
    }