QML类型：Loader

最新推荐文章于 2024-07-30 17:15:22 发布

Qt程序员

最新推荐文章于 2024-07-30 17:15:22 发布

阅读量582

点赞数

分类专栏： qml qt开发文章标签： c++ qt qml

本文链接：https://blog.csdn.net/hw5230/article/details/131479339

版权

qt开发同时被 2 个专栏收录

632 篇文章 126 订阅

订阅专栏

qml

59 篇文章 8 订阅

订阅专栏

一、描述

Loader 用于动态加载 QML 组件。

Loader 可以加载 QML 文件（使用 source 属性）或 Component 对象（使用 sourceComponent 属性）。它可用于延迟组件的创建。

下面例子在单击 MouseArea 时将“Page1.qml”作为组件加载：

import QtQuick 2.0

Item {
width: 200; height: 200

Loader { id: pageLoader }

MouseArea {
anchors.fill: parent
onClicked: pageLoader.source = "Page1.qml"
}
}

可以使用 item 属性访问加载的对象。

如果 source 或 sourceComponent 发生更改，则任何先前实例化的项目都将被销毁。

将 source 设置为空字符串或将 sourceComponent 设置为 undefined 会销毁当前加载的对象，释放资源并将 Loader 置空。

1.1、加载器大小调整行为

如果源组件不是 Item 类型，Loader 不会应用任何特殊的大小调整规则。当用于加载具有视觉效果的类型时，Loader 应用以下大小规则：

如果没有为 Loader 指定显式大小，则加载组件后，Loader 会自动调整为加载项的大小。
如果通过设置宽度、高度或锚定来明确指定 Loader 的大小，则加载的项目将调整为 Loader 的大小。

在下面这两种情况下，项目和加载器的大小是相同的。这确保了锚定到加载器等同于锚定到加载的项目。

本文福利，莬费领取Qt开发学习资料包、技术视频，内容包括（C++语言基础，Qt编程入门，QT信号与槽机制，QT界面开发-图像绘制，QT网络，QT数据库编程，QT项目实战，QT嵌入式开发，Quick模块等等）↓↓↓↓↓↓见下面↓↓文章底部点击莬费领取↓↓

1.2、接收来自加载对象的信号

可以使用 Connections 类型接收从加载的对象发出的任何信号：

import QtQuick

Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")

Item {
width: 200; height: 200

Loader {
id: myLoader
sourceComponent: rect
}

Connections
{
target: myLoader.item
function onMessage(msg) { console.log(msg) }
}

Component {
id: rect
Rectangle {
id: myItem
signal message(string msg)

width: 100; height: 100

MouseArea {
anchors.fill: parent
onClicked: myItem.message("按下")
}
}
}
}
}

加载的对象也可以直接调用 Loader 或其父项中定义的任何函数：

import QtQuick

Window {
id:root
width: 640
height: 480
visible: true
title: qsTr("Hello World")

function fun03() { console.log("fun03") }

Item {
id:loader_parent
width: 200; height: 200
function fun02() { console.log("fun02") }

Loader {
id: myLoader
sourceComponent: rect

function fun01() { console.log("fun01") }
}

Component {
id: rect
Rectangle {
id: myItem
signal message(string msg)

width: 100; height: 100

MouseArea {
anchors.fill: parent
onClicked:
{
myLoader.fun01()
loader_parent.fun02()
root.fun03()
}
}
}
}
}
}

1.3、焦点和按键事件

Loader 是一个焦点作用域。它的 focus 属性必须设置为 true。

import QtQuick

Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")

Item {
id:loader_parent
width: 200; height: 200

Loader {
id: myLoader
sourceComponent: rect
focus: true
}

Keys.onPressed: (event)=>
{
console.log("被载入的组件-放弃-捕获键盘按下事件");//01
}

Component {
id: rect
Item
{
Item
{
focus: true
Keys.onPressed: (event)=>
{
console.log("被载入的组件接收键盘按下事件");//02
event.accepted = true;
}
}
}
}
}
}

上面的代码：

被载入的组件和 Loader 要同时设置 focus 为 true，被载入的组件才能接收到键盘按下事件。打印02。

被载入组件设置 focus 为 false，Loader 设置 focus 为 true 则打印01

1.4、在视图委托中使用 Loader

在视图委托中使用 Loader 可以提高委托加载性能。但要注意正确的用法。

一个普通的委托：

当使用 Loader 时外部的组件不能引用 index：

正确的用法：

或：

二、属性成员

1、active : bool

Loader 当前是否处于活动状态。默认为 true。

如果 Loader 处于非活动状态，则更改 source 或 sourceComponent 不会导致项目被实例化，直到 Loader 处于活动状态。

非活动加载程序的 status 始终为 Loader.Null。

2、asynchronous : bool

组件是否将被异步实例化。默认为 false。

当与 source 属性结合使用时，加载和编译也将在后台线程中执行。

3、【只读】item : QtObject

当前加载的顶级对象。

4、progress : real

从网络加载 QML 数据的进度，从 0.0（未加载）到 1.0（已完成）。大多数 QML 文件都非常小，因此该值会迅速从 0 变为 1。

5、source : url

要实例化的 QML 组件的 URL。

要卸载当前加载的对象，将此属性设置为空字符串，或将 sourceComponent 设置为 undefined。将 source 设置为新的 URL 也会导致前一个 URL 创建的项目被卸载。

6、sourceComponent : Component

要实例化的组件。要卸载当前加载的对象，将此属性设置为 undefined。

Item {
Component {
id: redSquare
Rectangle { color: "red"; width: 10; height: 10 }
}

Loader { sourceComponent: redSquare }
Loader { sourceComponent: redSquare; x: 10 }
}

7、status : enumeration

QML 加载的状态。