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

QML动态加载与切换

最新推荐文章于 2025-08-25 19:06:25 发布

原创

最新推荐文章于 2025-08-25 19:06:25 发布 · 2.1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#qml #qt5

在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  // 动画指定的对