在QML学习和开发过程中，看到Loader的官方介绍之后，发现Loader就是用来动态加载一个qml或者component的容器。
有一个问题在我脑海里冒了出来：loader加载一个qml或者一个组件，完全可以通过设置这个qml或者组件的visible为true或者false进行显示，那么Loader的强大之处到底在哪里呢？
带着这个问题，浏览了一些资料和代码，最终发现了Loader的一个强大之处–可以对整个组件或者qml进行整体的动态切换，写起来比较简单明了。发现这个功能后，本人就动手用Loader去实现动态切换。
1、Loader的基本参数
关于Loader的基本参数，大家可以通过在qml代码中选中Loader，按F1键查看官方的帮助文档，这里就不多介绍了。
简单介绍一个Loader 加载组件的两种方法：
1.1、加载qml文件
Loader {
id:loader
}
loader.source = "MaskWin.qml"
1.2 加载component
Loader {
id: loader
}
// 创建一个component
Component {
id:testComponent
...
}
loader.sourceComponent = testComponent;
2、动态切换效果图
实现功能：点击按钮，窗口动态的出现和消失。
3、功能设计思路
1、做一个按钮，用来触发窗口切换
2、创建一个掩码窗口，最终生成一个qml文件
3、创建一个Loader, Loader中添加两种动画，一个是进入，一个是出去。
4、Loader指定qml，触发动画。
4、代码
LoaderSturdy.qml
import QtQuick 2.0
import QtQml 2.12
import QtQuick.Window 2.12
Window {
id: rootWin
width: 1000
height: 1000
color: "blue"
visible: false
// 创建一个背景为绿色的窗口
Rectangle {
id: background
anchors.fill:parent
color: "green"
}
// 创建一个loader对象，包含了两种动画，一个是进入，一个退出
Loader {
id: loader
NumberAnimation {
id: showMask
target: loader.item // 动画指定的对象是一个loader的item
property: "x"
duration: 1000
from: -rootWin.width
to: 0
easing.type: Easing.InExpo
}
NumberAnimation {
id: hideMask
target: loader.item
property: "x"
duration: 1000
from: 0
to: rootWin.width
easing.type: Easing.InExpo
}
}
// 显示的时候加载qml，并且设置进入动画为true
function show() {
rootWin.visible = true;
loader.source = "MaskWin.qml"
showMask.running = true
}
// 退出的时候，将退出动画设置为true
function hide() {
hideMask.running = true;
}
}
Btn.qml
import QtQuick 2.12
Rectangle {
property bool repeatFlag: false
property color textColor: Qt.darker("#56A420", 1)
property color backgroundColor: "#004597"
radius: 10
color: backgroundColor
Text {
id: label
anchors.centerIn: parent
font.pixelSize: 30
color: textColor
text: !repeatFlag ? "Show" :"Hide"
font.bold: true
}
}
main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQml 2.12
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
MaskWin {
id:maskWindow
anchors.fill: parent
visible: false;
}
Btn {
id: loadBtn
anchors.top: parent.top
anchors.topMargin: 30
anchors.left: parent.left
anchors.leftMargin: 30
width: 100
height: 100
radius: 10
MouseArea {
anchors.fill: parent
onClicked: {
loadBtn.repeatFlag = !loadBtn.repeatFlag
if (loadBtn.repeatFlag) {
loaderS.show();
} else {
loaderS.hide();
}
}
}
}
LoaderSturdy {
id: loaderS
}
}
MaskWin.qml
import QtQuick 2.12
import QtQuick.Window 2.12
Rectangle {
id:maskWin
color: Qt.rgba(0.2,0.2,0.2,0.8)
width: 1000
height: 1000
z: 100
MouseArea {
anchors.fill: parent
}
Rectangle {
id:showWin
visible: true
width: parent.width/2
height: parent.height/2
x: (parent.width - width)/2
y: (parent.height - height)/2
color: "white"
radius: 10
}
Rectangle {
id:exitIcon
anchors.right: showWin.right
anchors.bottom: showWin.top
anchors.bottomMargin: 20
width: 40
height: 40
radius: width/2
border.color: "white"
border.width: 1
color: "transparent"
Text {
id: cancel
text: qsTr("X")
anchors.fill: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.pixelSize: 30
color: "white"
}
MouseArea {
anchors.fill: parent
onClicked: {
maskWin.visible = false;
}
}
}
}