QML进阶--Loader实现组件的动态切换

在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.12Window {id: rootWinwidth: 1000height: 1000color: "blue"visible: false// 创建一个背景为绿色的窗口Rectangle {id: backgroundanchors.fill:parentcolor: "green"}// 创建一个loader对象，包含了两种动画，一个是进入，一个退出Loader {id: loaderNumberAnimation {id: showMasktarget: loader.item  // 动画指定的对象是一个loader的itemproperty: "x"duration: 1000from: -rootWin.widthto: 0easing.type: Easing.InExpo}NumberAnimation {id: hideMasktarget: loader.itemproperty: "x"duration: 1000from: 0to: rootWin.widtheasing.type: Easing.InExpo}}// 显示的时候加载qml，并且设置进入动画为truefunction show() {rootWin.visible = true;loader.source = "MaskWin.qml"showMask.running = true}// 退出的时候，将退出动画设置为truefunction hide() {hideMask.running = true;}
}

Btn.qml

import QtQuick 2.12Rectangle {property bool repeatFlag: falseproperty color textColor: Qt.darker("#56A420", 1)property color backgroundColor: "#004597"radius: 10color: backgroundColorText {id: labelanchors.centerIn: parentfont.pixelSize: 30color: textColortext: !repeatFlag ? "Show" :"Hide"font.bold: true}
}

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQml 2.12Window {visible: truewidth: 640height: 480title: qsTr("Hello World")MaskWin {id:maskWindowanchors.fill: parentvisible: false;}Btn {id: loadBtnanchors.top: parent.topanchors.topMargin: 30anchors.left: parent.leftanchors.leftMargin: 30width: 100height: 100radius: 10MouseArea {anchors.fill: parentonClicked: {loadBtn.repeatFlag = !loadBtn.repeatFlagif (loadBtn.repeatFlag) {loaderS.show();} else {loaderS.hide();}}}}LoaderSturdy {id: loaderS}
}

MaskWin.qml

import QtQuick 2.12
import QtQuick.Window 2.12Rectangle {id:maskWincolor: Qt.rgba(0.2,0.2,0.2,0.8)width: 1000height: 1000z: 100MouseArea {anchors.fill: parent}Rectangle {id:showWinvisible: truewidth: parent.width/2height: parent.height/2x: (parent.width - width)/2y: (parent.height - height)/2color: "white"radius: 10}Rectangle {id:exitIconanchors.right: showWin.rightanchors.bottom: showWin.topanchors.bottomMargin: 20width: 40height: 40radius: width/2border.color: "white"border.width: 1color: "transparent"Text {id: canceltext: qsTr("X")anchors.fill: parenthorizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenterfont.pixelSize: 30color: "white"}MouseArea {anchors.fill: parentonClicked: {maskWin.visible = false;}}}
}