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

QML(11)——qml界面之间通信方式详解

目录

  • 一、属性绑定
    • 1、直接绑定 property01: property02
      • 实例
      • 代码
    • 2、条件绑定 Qt.binding
      • 实例
      • 代码
  • 二、信号传递
    • 1、on<Property>Changed
      • 实例
      • 代码
    • 2、on<Signal>
      • 实例
      • 代码
    • 3、条件信号传递 connect
      • 实例
      • 代码
    • 4、Connections

一、属性绑定

属性绑定具有持续性

1、直接绑定 property01: property02

在组件初始化后,一直绑定
子界面可以直接调用父界面的全部组件/属性

实例

在这里插入图片描述

代码

// 父界面
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 1.4ColumnLayout {anchors.fill: parentRectangle {id: rootRecLayout.fillWidth: trueLayout.preferredHeight: Math.round(parent.height / 5)color: "gray"opacity: 0.5Text {id: rootRecSizetext: rootRec.width + " * " + rootRec.heightfont.pixelSize: 22anchors.centerIn: parent}}// 子界面SecondPane {Layout.alignment: Qt.AlignHCenterLayout.topMargin: 50Layout.fillWidth: trueLayout.preferredHeight: 80}
}
// 子界面
import QtQuick 2.15
import QtQuick.Controls 1.4TextField {id: secondText// 内部明确size, 便于预览效果,   实际size在调用处再次设置width: 200// 子界面可以直接调用父界面的组件text: "second call root:  " + rootRecSize.textfont.pixelSize: 20horizontalAlignment: Qt.AlignHCenterverticalAlignment: Qt.AlignVCenter
}

2、条件绑定 Qt.binding

满足某些条件时,才进行绑定动作。
如果绑定时,组件还未初始化完成,绑定动作会失效。

实例

点击方框后,才开始属性绑定
在这里插入图片描述

代码

// 父界面
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 1.4ColumnLayout {anchors.fill: parentRectangle {id: rootRecLayout.fillWidth: trueLayout.preferredHeight: Math.round(parent.height / 3)color: "gray"opacity: 0.5Text {id: rootRecSizetext: rootRec.width + " * " + rootRec.heightfont.pixelSize: 22anchors.centerIn: parent}}// 子界面SecondPane {id: secondPaneLayout.alignment: Qt.AlignHCenterLayout.topMargin: 50Layout.fillWidth: trueLayout.preferredHeight: 80MouseArea {anchors.fill: parentonClicked: {// 单次赋值,不具备持续性
//                secondPane.text = rootRecSize.textsecondPane.text = Qt.binding(function() {return rootRecSize.text})}}}
}
// 子界面
import QtQuick 2.15
import QtQuick.Controls 1.4TextField {id: secondText// 内部明确size, 便于预览效果,   实际size在调用处再次设置width: 200font.pixelSize: 20horizontalAlignment: Qt.AlignHCenterverticalAlignment: Qt.AlignVCenter
}

二、信号传递

1、on<Property>Changed

属性传递分为组件默认属性 和 自定义属性

实例

在这里插入图片描述

代码

//  父界面
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 1.4ColumnLayout {anchors.fill: parentSecondPane {Layout.fillWidth: trueLayout.preferredHeight: Math.round(parent.height / 4)onHeightChanged: { text = "onHeightChanged: " + height }}SecondPane {Layout.fillWidth: trueLayout.preferredHeight: Math.round(parent.height / 4)onAreaChanged: { text = "onAreaChanged: " + area }}
}
// 子界面
import QtQuick 2.15
import QtQuick.Controls 1.4TextField {id: secondTextproperty int area: width * height   // 自定义属性// 内部明确size, 便于预览效果,   实际size在调用处再次设置width: 200height: 80font.pixelSize: 20horizontalAlignment: Qt.AlignHCenterverticalAlignment: Qt.AlignVCenter
}

2、on<Signal>

分为组件默认属性 和 自定义属性

实例

在这里插入图片描述

代码

// 父界面
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 1.4ColumnLayout {anchors.fill: parentRectangle {id: rootRecLayout.fillWidth: trueLayout.preferredHeight: Math.round(parent.height / 4)color: "gray"opacity: 0.5Text {id: rootRecSizetext: rootRec.width + " * " + rootRec.heightfont.pixelSize: 22anchors.centerIn: parent}MouseArea {anchors.fill: parentonWheel: {rootRecSize.text = "default signal"}}}SecondPane {id: pane01Layout.fillWidth: trueLayout.preferredHeight: Math.round(parent.height / 4)onClick: {pane01.text = "自定义信号, 不含参数"}}SecondPane {id: pane02Layout.fillWidth: trueLayout.preferredHeight: Math.round(parent.height / 4)onSigValue: {pane02.text = "自定义信号, 含参数: " + loX + "*" + loY}}
}
// 子界面
import QtQuick 2.15
import QtQuick.Controls 1.4TextField {id: secondText// 自定义信号signal click()signal sigValue(int loX, int loY)width: 200height: 80font.pixelSize: 20horizontalAlignment: Qt.AlignHCenterverticalAlignment: Qt.AlignVCenterMouseArea {anchors.fill: parentonClicked:  {secondText.click()secondText.sigValue(mouseX, mouseY)}}
}

3、条件信号传递 connect

上述 on<Property>Changed 和 on<Signal> 都是属于无条件的信号传递。响应信号的代码都放在元素内部,通过JS代码块就地实现。
如果需要在某些条件下才建立信号机制,则使用connect。

实例

点击”start“按钮之前,任何信号都不会出发
点击之后, 开始建立信号机制
在这里插入图片描述

代码

import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 1.4ColumnLayout {anchors.fill: parentRectangle {id: rootRecLayout.fillWidth: trueLayout.preferredHeight: 50color: "green"opacity: 0.5Text {id: rootRecSizetext: "start"font.pixelSize: 22anchors.centerIn: parent}MouseArea {id: mouseAreaanchors.fill: parentonClicked: {rootRec.opacity = 0.2// 开始建立信号连接机制pane01.click.connect(slotNone)              // 无参数信号pane02.sigValue.connect(slotPara)           // 有参数信号pane03.heightChanged.connect(slotProperty)  // 属性信号}}}SecondPane {id: pane01Layout.alignment: Qt.AlignHCenter}SecondPane {id: pane02Layout.alignment: Qt.AlignHCenter}SecondPane {id: pane03Layout.alignment: Qt.AlignHCenterLayout.preferredHeight: parent.height / 4}function slotNone(){pane01.text = "slotNone"}function slotPara(a){pane02.text = "slotPara: " + a}function slotProperty(){pane03.text = "slotProperty" + pane03.height}
}
import QtQuick 2.15
import QtQuick.Controls 1.4TextField {id: secondTextproperty int area: width * heightsignal click()signal sigValue(int loX)// 内部明确size, 便于预览效果,   实际size在调用处再次设置width: 200height: 60font.pixelSize: 20horizontalAlignment: Qt.AlignHCenterverticalAlignment: Qt.AlignVCenterMouseArea {anchors.fill: parentonClicked:  {secondText.click()secondText.sigValue(mouseX)}}
}

4、Connections

Connections的优点主要有以下3个:

  • List item
  • 将多个对象连接到同一个QML信号上
  • 在发出信号的对象的作用域之外来建立连接 (条件信号传递)
    发射信号的对象是C++

前两条,connect具有同样的效果。

MouseArea {id: area
}Connections {target: areafunction onClicked(mouse) { foo(mouse) }
}

相关文章:

QML(11)——qml界面之间通信方式详解

目录 一、属性绑定1、直接绑定 property01: property02实例代码 2、条件绑定 Qt.binding实例代码 二、信号传递1、on<Property>Changed实例代码 2、on<Signal>实例代码 3、条件信号传递 connect实例代码 4、Connections 一、属性绑定 属性绑定具有持续性 1、直接…...

图像检索算法 计算机竞赛

文章目录 1 前言2 图像检索介绍(1) 无监督图像检索(2) 有监督图像检索 3 图像检索步骤4 应用实例5 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 图像检索算法 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff…...

科学清理Windows系统垃圾,让你的电脑性能快如火箭

文章目录 1. 使用磁盘清理工具2. 清理临时文件2.1 清理用户临时文件夹2.2 清理系统临时文件夹2.3 清理系统临时文件 3.卸载不需要的程序4. 删除不必要的下载文件5. 清理回收站6. 压缩磁盘7. 删除旧的系统还原点8. 禁用休眠功能9. 定期进行磁盘碎片整理10. 禁用不必要的启动项11…...

docker图形胡界面管理工具--Portainer可视化面板安装

1.安装运行Portainer docker run -d -p 8088:9000 \ > --restartalways -v /var/run/docker.sock:/var/run/docker.sock --privilegedtrue portainer/portainer--restartalways&#xff1a;Docker启动后容器自动启动 -p&#xff1a;端口映射 -v&#xff1a;路径映射2.通过…...

环形链表的约瑟夫问题

前言&#xff1a; 据说著名犹太历史学家Josephus有过如下故事&#xff1a; 在罗马人占领乔塔帕特后&#xff0c;39个犹太人和Josephus及他的朋友躲进一个洞里&#xff0c;39个犹太人决定宁愿死也不要被敌人抓到&#xff0c;于是决定了一个自杀方式&#xff0c;41个人排成一个…...

python requests.get发送Http请求响应结果乱码、Postman请求结果正常

最近在写爬虫程序&#xff0c;自己复制网页http请求的url、头部&#xff0c;使用python requests和postman分别请求&#xff0c;结果使用postman发送http get请求&#xff0c;可以得到正常的json数据&#xff0c;但是使用python的requests发送则接受到乱码&#xff0c;response…...

Dialog动画相关

最近需求一个问题&#xff0c;想要在dialog消失时增加动画&#xff0c;之前如上一个文章中遇到的&#xff0c;但是最后改了实现方式&#xff0c;要求在特定的地方缩放&#xff0c;原来的dialog高度是wrap_content的&#xff0c;这样是无法实现的&#xff0c;因此首先需要将dial…...

【java学习—八】==操作符与equals方法(2)

文章目录 1. 操作符2. equals方法String对象的创建 1. 操作符 &#xff08;1&#xff09;基本类型比较值 : 只要两个变量的值相等&#xff0c;即为 true. int a5; if(a6){…} &#xff08;2&#xff09;引用类型比较引用 ( 是否指向同一个对象 ): 只有指向同一个对象时&#…...

Linux系统编程_进程间通信第1天:IPC、无名管道pipe和命名管道mkfifo(半双工)、消息队列msgget(全双工)

1. 进程间通信概述&#xff08;427.1&#xff09; 2. 管道通信原理&#xff08;428.2&#xff09; 进程间的五种通信方式介绍 https://blog.csdn.net/wh_sjc/article/details/70283843 进程间通信&#xff08;IPC&#xff0c;InterProcess Communication&#xff09;&#xff…...

figma+windows系统

...

typescript实现一个简单的区块链

TypeScript 是一种由 Microsoft 推出的开源编程语言&#xff0c;它是 JavaScript 的超集&#xff0c;允许程序员使用面向对象的方式编写代码&#xff0c;并提供类型检查和语法提示等优秀的开发体验。区块链技术是一种分布式的、可靠的、不可篡改的数据库技术&#xff0c;用于记…...

服务器被暴力破解怎么解决

暴力破解分两种&#xff0c;一种是SSH暴力破解&#xff0c;属于Linux服务器。一种是RDP暴力破解&#xff0c;属于Windows服务器。两者其实攻击手法一样&#xff0c;都是黑客利用扫描工具对某一个IP段扫描&#xff0c;而Linux跟Windows登录端口为别是22和3389。那怎样才能有效避…...

用来生成二维矩阵的dcgan

有大量二维矩阵作为样本&#xff0c;为连续数据。数据具有空间连续性&#xff0c;因此用卷积网络&#xff0c;通过dcgan生成二维矩阵。因为是连续变量&#xff0c;因此损失采用nn.MSELoss()。 import torch import torch.nn as nn import torch.optim as optim import numpy a…...

免费的国产数据集成平台推荐

在如今的数字化时代下&#xff0c;企业内部的数据无疑是重要资产之一。随着数据源的多样性和数量剧增&#xff0c;如何有效地收集、整合、存储、管理和分析数据变得至关重要。为了解决这些常见痛点&#xff0c;数据集成平台成为了现代企业不可或缺的一部分。 数据集成是现代数…...

【yolov8系列】yolov8的目标检测、实例分割、关节点估计的原理解析

1 YOLO时间线 这里简单列下yolo的发展时间线&#xff0c;对每个版本的提出有个时间概念。 2 yolov8 的简介 工程链接&#xff1a;https://github.com/ultralytics/ultralytics 2.1 yolov8的特点 采用了anchor free方式&#xff0c;去除了先验设置可能不佳带来的影响借鉴Genera…...

5256C 5G终端综合测试仪

01 5256C 5G终端综合测试仪 产品综述&#xff1a; 5256C 5G终端综合测试仪主要用于5G终端、基带芯片的研发、生产、校准、检测、认证和教学等领域。该仪表具备5G信号发送功能、5G信号功率特性、解调特性和频谱特性分析功能&#xff0c;支持5G终端的产线高速校准及终端发射机…...

Springboot Actuator 环境搭建踩坑

JMX和Springboot Actuator JMX是Java Management Extensions&#xff0c;它是一个Java平台的管理和监控接口。 为什么要搞JMX呢&#xff1f;因为在所有的应用程序中&#xff0c;对运行中的程序进行监控都是非常重要的&#xff0c;Java应用程序也不例外。我们肯定希望知道Java…...

Vue-3.3ESLint

ESLint代码规范 代码规范&#xff1a;一套写代码的约定规则。 JavaScript Standard Style规范说明https://standardjs.com/rules-zhcn.html 代码规范错误 如果你的代码不符合standard的要求&#xff0c;ESlint会跳出来提醒。 比如&#xff1a;在mian.js中随意做一些改动&a…...

STROBE-MR

Welcome to the STROBE-MR website! About: STROBE-MR stands for “Strengthening the Reporting of Observational Studies in Epidemiology using Mendelian Randomization”. Inspired by the original STROBE checklist, the STROBE-MR guidelines were developed to ass…...

Hive安装配置 - 内嵌模式

文章目录 一、Hive运行模式二、安装配置内嵌模式Hive&#xff08;一&#xff09;下载hive安装包&#xff08;二&#xff09;上传hive安装包&#xff08;三&#xff09;解压缩hive安装包&#xff08;四&#xff09;配置hive环境变量&#xff08;五&#xff09;关联Hadoop&#x…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...