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引入的
}
}