网站打不开了怎么办,建e网官方网站,国内建站平台有哪些,easyui 做网站在实际项目中#xff0c;有时候我们写好一个组件#xff0c;但不是立即加载出来#xff0c;而是触发某些条件后才动态的加载显示出来#xff0c;当处理完某些操作后#xff0c;再次将其关闭掉#xff1b;
这样的需求#xff0c;可以使用 Component 包裹着组件#xff…在实际项目中有时候我们写好一个组件但不是立即加载出来而是触发某些条件后才动态的加载显示出来当处理完某些操作后再次将其关闭掉
这样的需求可以使用 Component 包裹着组件然后使用 Loader 去动态的加载和关闭 Component 可以加载任何部件例如RectangleButtonImage等等
如果需要包裹多个部件使用 Item { } 包裹着这些部件即可
Component {Item {Rectangle { }Button { }......}
} Component 有两个很常用信号就是创建前触发和销毁前触发类似构造函数和析构函数也可以说时回调
只需要在定义该槽函数即可
Window {id: root// 窗口创建时触发 Component.onCompleted: { root.x 200 root.y 200 root.color green console.log(onCompleted, width, height) }// 窗口销毁时触发 Component.onDestruction: { console.log(onDestruction) }
}
窗口创建销毁前都会去执行相应方法 下面是使用Component加载一个 Rectangle
Component { id: com Rectangle { id: rect width: 200 height: 100 color: red }
}
如果直接这样写上去程序运行后是不会在窗口中有加载Rectangle出来的需要使用Loader 去动态加载才行
Loader { id: loader sourceComponent: com // 加载id为 com 的组件
} 在Loader中有一个status状态可以用于判断窗口处于哪个阶段
填写上 onStatusChanged: { } 槽函数在status状态发生改变时此槽函数回立即触发
status 一共有四种状态 Loader.Null - 未加载 - 0 Loader.Ready - 已加载 - 1 Loader.Loading - 加载中 - 2 Loader.Error - 加载错误 - 3 可以在槽函数中根据这些状态去做某些相应的操作
Loader { id: loader // 异步加载部件当这个部件很大时例如加载很大的图片或者加载很大的数据为了不卡死界面需要使用异步加载 asynchronous: true sourceComponent: com onStatusChanged: { console.log(status:, status) if (2 status) { // 处理一些操作 console.log(加载中...) } else if (1 status){ // 处理以下操作 console.log(加载完毕.) } }
}
需要注意的是加载中需要在异步加载窗口的时候才会体现出来即属性 asynchronous: true 当然也可以在被加载的Rectangle部件中写上Component.onCompleted: { } 和 Component.onDestruction: { }
这样当Rectangle被成功加载后或者被关闭后都会触发槽函数
Rectangle { id: rect width: 200 height: 100 color: red // 窗口创建时触发 Component.onCompleted: { console.log(onCompleted, width, height) } // 窗口销毁时触发 Component.onDestruction: { console.log(onDestruction) }
} 那么如何动态的去加载呢
为了模仿这些场景我们定义两个按钮一个用于加载一个用于关闭
Button { x: 250 text: 关闭 onClicked: { loader.sourceComponent null }
} Button { x: 250 y: 100 text: 显示 onClicked: { loader.sourceComponent com }
}
将sourceComponent 赋值null即可将窗口隐藏将sourceComponent 赋值Component的id即可加载显示
现在将Loader中的sourceComponent置null
Loader { id: loader sourceComponent: null......
} 当Rectangle被加载出来后我们还能不能再修改他呢
答案是可以的
需要使用到loader.item属性查看帮助文档介绍 此属性保存当前加载的顶级对象。
那么也就是说loader.item 也就相当于rect即Rectangle的id
新加第三个按钮用于测试
Button { x: 250 y: 200 text: 修改属性 onClicked: { loader.item.width 50 loader.item.height 50 loader.item.color green }
} 另外 Loader的source属性可以加载自己编写的qml文件
Loader {id: loadersource: /MyRectangle.qml
} 最后是代码分享
import QtQuick 2.9
import QtQuick.Window 2.2import QtQuick.Controls 2.2Window {id: rootvisible: truewidth: 640height: 480title: qsTr(Hello World)color: whiteminimumWidth: 300minimumHeight: 400maximumHeight: 500maximumWidth: 400// 透明度//opacity: 0.5// 窗口创建时触发
// Component.onCompleted: {
// root.x 200
// root.y 200
// root.color green
// console.log(onCompleted, width, height)
// }// // 窗口销毁时触发
// Component.onDestruction: {
// console.log(onDestruction)
// }// Component 可以加载任何部件然后可以使用 Loader 去动态加载然后也可以再动态销毁掉Component {id: comRectangle {id: rectwidth: 200height: 100color: red// 窗口创建时触发Component.onCompleted: {console.log(onCompleted, width, height)}// 窗口销毁时触发Component.onDestruction: {console.log(onDestruction)}}// Component 内部如果需要添加多个部件需要使用Item包裹着
// Item {
// id: item_id
// Rectangle {
// id: rect1
// width: 60
// height:60
// color: yellow
// }
// Button {
// id: btn
// y:100
// text: 测试按钮
// }
// Image { }
// }}Loader {id: loader// 异步加载部件当这个部件很大时例如加载很大的图片或者加载很大的数据为了不卡死界面需要使用异步加载asynchronous: true//source: /MyRectangle.qmlsourceComponent: comonStatusChanged: {console.log(status:, status)// 加载中if (2 status) {// 处理一些操作console.log(加载中...)} else if (1 status){// 处理以下操作console.log(加载完毕.)}}}Button {x: 250text: 关闭onClicked: {loader.sourceComponent null}}Button {x: 250y: 100text: 显示onClicked: {loader.sourceComponent com}}Button {x: 250y: 200text: 修改属性onClicked: {loader.item.width 50loader.item.height 50loader.item.color green}}
} 完
