当前位置: 首页 > news >正文

QML Component 与 Loader 结合动态加载组件

在实际项目中,有时候我们写好一个组件,但不是立即加载出来,而是触发某些条件后才动态的加载显示出来,当处理完某些操作后,再次将其关闭掉;

这样的需求,可以使用 Component 包裹着组件,然后使用 Loader 去动态的加载和关闭;

Component 可以加载任何部件,例如,Rectangle,Button,Image等等

如果需要包裹多个部件,使用 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: "white"minimumWidth: 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.qml"sourceComponent: 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"}}
}

 

完! 

相关文章:

QML Component 与 Loader 结合动态加载组件

在实际项目中,有时候我们写好一个组件,但不是立即加载出来,而是触发某些条件后才动态的加载显示出来,当处理完某些操作后,再次将其关闭掉; 这样的需求,可以使用 Component 包裹着组件&#xff…...

Visual studio 2022 将打开文件的方式由单击改为双击

1. 打开vs2022,选择Tools -> Options打开Options设置页面 2. 在左侧依次展开Environment, 选择Tabs and Windows 3. 在右侧面板往下拖拽滚动条,找到Preview Tab section, unchecked "Preview selected files in Solution Explorer (Altclick t…...

网络工程师 (49)UDP协议

前言 UDP协议,即用户数据报协议(User Datagram Protocol),是一种无连接的、不可靠的、面向报文的传输层通信协议。 一、基本特点 无连接性:UDP在发送数据之前不需要与目标设备建立连接,也无需在数据发送结束…...

了解大数据

一、大数据的特点: 1.大量 2.高速 3.多样 结构化数据和非结构化数据 4.低价值密度 二、大数据的应用场景:视频推荐、电商推荐等 三、大数据的技术发展脉络 阶段1:单机时代 阶段2:大数据时代-分布式处理 阶段3:实…...

命令模式

1. 命令模式简介 命令模式(Command Pattern)是一种行为型设计模式,它将一个请求封装为一个对象,从而使您可以用不同的请求对客户进行参数化、对请求排队或记录请求日志,以及支持可撤销的操作。命令模式的核心思想是将操作和操作的执行者解耦,使得操作可以独立于执行者进…...

解放大脑!用DeepSeek自动生成PPT!

DeepSeek应用(PPT篇) DeepSeek作为当前最好的AI大模型之一,其强大的文本生成能力被广泛的应用于各个领域,本文我们来聊聊用DeepSeek来自动生成PPT。 一、DeepSeek & PPT DeepSeek本身没有直接生成PPT的能力,换个…...

GUI编程(window系统→Linux系统)

最近有个项目需要将windows系统的程序往Linux系统上面移植,由于之前程序没有考虑过多平台兼容的问题,导致部分功能不可用以下是对近期遇到的问题的总结,以及相应的解决方案和经验分享。 1. Python 模块安装与管理 在 Linux 系统中&#xff0…...

互推机制在开源AI智能名片2+1链动模式S2B2C商城小程序源码推广中的应用探索

摘要: 在数字化营销时代,开源AI智能名片21链动模式S2B2C商城小程序源码作为一种创新的技术解决方案,正逐步成为企业数字化转型的重要工具。然而,面对激烈的市场竞争,如何高效推广这一前沿技术产品,成为开发…...

Pytorch实现之特征损失与残差结构稳定GAN训练,并训练自己的数据集

简介 简介:生成器和鉴别器分别采用了4个新颖设计的残差结构实现,同时在损失中结合了鉴别器层的特征损失来提高模型性能。 论文题目:Image Generation by Residual Block Based Generative Adversarial Networks(基于残留块的生成对抗网络产生图像) 会议:2022 IEEE Int…...

ES6相关操作(2)

一.Promise Promise是ES6引入的异步编程工具。 语法上Promise是一个构造函数,用于封装异步操作并可以获取操作成功或失败的结果 Promise构造函数:Promise(excutor){} Promise的常用函数:then,catch 实例化Promise对象(创建Promise工具) let data"请求数据"//该数据为…...

自动化办公|xlwings生成图表

在日常的数据分析和报告生成中,Excel图表是一个非常重要的工具。它能够帮助我们直观地展示数据,发现数据中的规律和趋势。然而,手动创建和调整图表往往耗时且容易出错。幸运的是,借助Python的xlwings库,我们可以自动化…...

大模型知识蒸馏技术(5)——在线蒸馏

版权声明 本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl1. 在线蒸馏概述 在线蒸馏是一种知识蒸馏方式,其核心特点是教师模型和学生模型的参数在训练过程中同时更新,整个蒸馏框架是端到端训练的。这种方式允许教师模型和学生模型相互影响、共同学习,能…...

Java 条件语句

Java 条件语句概述 条件语句通过判断给定条件的真假来控制程序的执行。本小节将详细介绍 Java 中各类条件语句。 1. if 语句 1.1 语法 用于根据给定条件决定是否执行一段代码。if 块仅在关联的布尔表达式为 true 时执行。 if (条件) {// 当条件成立时执行此处代码 }大括号…...

用JMeter给要登录的操作做压力测试

压力测试的http请求路径如下图 应当添加http Header Manager,设置登录凭证...

算法的数学基础

组合数 从n个不同元素中取出m(m≤n)个不同元素的所有组合的个数:C(n, m) n! / [m!(n - m)!]n个物品所有可能的组合数(不考虑组合的大小m):Σ C(n, m) C(n, 0) C(n, 1) C(n, 2) … C(n, n) 2 n 2^n 2…...

flowable适配达梦数据库

文章目录 适配相关问题无法从数据库产品名称“DM DBMS”中推断数据库类型分析解决 构建ibatis SqlSessionFactory时出错:inStream参数为null分析解决 liquibase相关问题问题一:不支持的数据库 Error executing SQL call current_schema: 无法解析的成员访…...

VScode C语言学习开发环境;运行提示“#Include错误,无法打开源文件stdio.h”

C/C环境配置 参考: VS Code 配置 C/C 编程运行环境(保姆级教程)_vscode配置c环境-CSDN博客 基本步骤 - 安装MinGW-W64,其包含 GCC 编译器:bin目录添加到环境变量;CMD 中输入gcc --version或where gcc验证…...

DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地

对于个人开发者或尝鲜者而言,本地想要部署 DeepSeek 有很多种方案,但是一旦涉及到企业级部署,则步骤将会繁琐很多。 比如我们的第一步就需要先根据实际业务场景评估出我们到底需要部署什么规格的模型,以及我们所要部署的模型&…...

自制简单的图片查看器(python)

图片格式:支持常见的图片格式(JPG、PNG、BMP、GIF)。 import os import tkinter as tk from tkinter import filedialog, messagebox from PIL import Image, ImageTkclass ImageViewer:def __init__(self, root):self.root rootself.root.…...

RD-搭建测试环境

测试团队职责 环境验证:确保开发部署的测试环境可访问,页面/接口无阻塞问题; 配置检查**:核对数据库连接、接口域名、HT证书等关键配置; 数据准备**:导入基线数据,隔离测试与生产数据&#xff1…...

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘

美国西海岸的夏天,再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至,这不仅是开发者的盛宴,更是全球数亿苹果用户翘首以盼的科技春晚。今年,苹果依旧为我们带来了全家桶式的系统更新,包括 iOS 26、iPadOS 26…...

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能,包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...