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

news2024/12/22 22:08:44

目录

  • 一、属性绑定
    • 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.4

ColumnLayout {
    anchors.fill: parent
    Rectangle {
        id: rootRec
        Layout.fillWidth: true
        Layout.preferredHeight: Math.round(parent.height / 5)
        color: "gray"
        opacity: 0.5
        Text {
            id: rootRecSize
            text: rootRec.width + " * " + rootRec.height
            font.pixelSize: 22
            anchors.centerIn: parent
        }
    }

    // 子界面
    SecondPane {
        Layout.alignment: Qt.AlignHCenter
        Layout.topMargin: 50
        Layout.fillWidth: true
        Layout.preferredHeight: 80
    }
}

// 子界面
import QtQuick 2.15
import QtQuick.Controls 1.4

TextField {
    id: secondText
    // 内部明确size, 便于预览效果，   实际size在调用处再次设置
    width: 200
    // 子界面可以直接调用父界面的组件
    text: "second call root:  " + rootRecSize.text
    font.pixelSize: 20
    horizontalAlignment: Qt.AlignHCenter
    verticalAlignment: Qt.AlignVCenter
}

2、条件绑定 Qt.binding

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

实例

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

代码

// 父界面
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 1.4

ColumnLayout {
    anchors.fill: parent
    Rectangle {
        id: rootRec
        Layout.fillWidth: true
        Layout.preferredHeight: Math.round(parent.height / 3)
        color: "gray"
        opacity: 0.5
        Text {
            id: rootRecSize
            text: rootRec.width + " * " + rootRec.height
            font.pixelSize: 22
            anchors.centerIn: parent
        }
    }

    // 子界面
    SecondPane {
        id: secondPane
        Layout.alignment: Qt.AlignHCenter
        Layout.topMargin: 50
        Layout.fillWidth: true
        Layout.preferredHeight: 80
        MouseArea {
            anchors.fill: parent
            onClicked: {
                // 单次赋值，不具备持续性
//                secondPane.text = rootRecSize.text
                secondPane.text = Qt.binding(function() {return rootRecSize.text})
            }
        }
    }
}

// 子界面
import QtQuick 2.15
import QtQuick.Controls 1.4

TextField {
    id: secondText
    // 内部明确size, 便于预览效果，   实际size在调用处再次设置
    width: 200
    font.pixelSize: 20
    horizontalAlignment: Qt.AlignHCenter
    verticalAlignment: Qt.AlignVCenter
}

二、信号传递

1、on<Property>Changed

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

实例

在这里插入图片描述

代码

//  父界面
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 1.4

ColumnLayout {
    anchors.fill: parent
    SecondPane {
        Layout.fillWidth: true
        Layout.preferredHeight: Math.round(parent.height / 4)
        onHeightChanged: { text = "onHeightChanged: " + height }
    }
    SecondPane {
        Layout.fillWidth: true
        Layout.preferredHeight: Math.round(parent.height / 4)
        onAreaChanged: { text = "onAreaChanged: " + area }
    }
}

// 子界面
import QtQuick 2.15
import QtQuick.Controls 1.4

TextField {
    id: secondText
    property int area: width * height   // 自定义属性
    // 内部明确size, 便于预览效果，   实际size在调用处再次设置
    width: 200
    height: 80
    font.pixelSize: 20
    horizontalAlignment: Qt.AlignHCenter
    verticalAlignment: Qt.AlignVCenter
}

2、on<Signal>

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

实例

在这里插入图片描述

代码

// 父界面
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 1.4

ColumnLayout {
    anchors.fill: parent
    Rectangle {
        id: rootRec
        Layout.fillWidth: true
        Layout.preferredHeight: Math.round(parent.height / 4)
        color: "gray"
        opacity: 0.5
        Text {
            id: rootRecSize
            text: rootRec.width + " * " + rootRec.height
            font.pixelSize: 22
            anchors.centerIn: parent
        }

        MouseArea {
            anchors.fill: parent
            onWheel: {
                rootRecSize.text = "default signal"
            }
        }
    }

    SecondPane {
        id: pane01
        Layout.fillWidth: true
        Layout.preferredHeight: Math.round(parent.height / 4)
        onClick: {
            pane01.text = "自定义信号, 不含参数"
        }
    }

    SecondPane {
        id: pane02
        Layout.fillWidth: true
        Layout.preferredHeight: Math.round(parent.height / 4)
        onSigValue: {
            pane02.text = "自定义信号, 含参数: " + loX + "*" + loY
        }
    }
}

// 子界面
import QtQuick 2.15
import QtQuick.Controls 1.4

TextField {
    id: secondText
    // 自定义信号
    signal click()
    signal sigValue(int loX, int loY)
    width: 200
    height: 80
    font.pixelSize: 20
    horizontalAlignment: Qt.AlignHCenter
    verticalAlignment: Qt.AlignVCenter
    MouseArea {
        anchors.fill: parent
        onClicked:  {
            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.4

ColumnLayout {
    anchors.fill: parent
    Rectangle {
        id: rootRec
        Layout.fillWidth: true
        Layout.preferredHeight: 50
        color: "green"
        opacity: 0.5
        Text {
            id: rootRecSize
            text: "start"
            font.pixelSize: 22
            anchors.centerIn: parent
        }
        MouseArea {
            id: mouseArea
            anchors.fill: parent
            onClicked: {
                rootRec.opacity = 0.2
                // 开始建立信号连接机制
                pane01.click.connect(slotNone)              // 无参数信号
                pane02.sigValue.connect(slotPara)           // 有参数信号
                pane03.heightChanged.connect(slotProperty)  // 属性信号
            }
        }
    }

    SecondPane {
        id: pane01
        Layout.alignment: Qt.AlignHCenter
    }

    SecondPane {
        id: pane02
        Layout.alignment: Qt.AlignHCenter
    }

    SecondPane {
        id: pane03
        Layout.alignment: Qt.AlignHCenter
        Layout.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.4

TextField {
    id: secondText
    property int area: width * height
    signal click()
    signal sigValue(int loX)
    // 内部明确size, 便于预览效果，   实际size在调用处再次设置
    width: 200
    height: 60
    font.pixelSize: 20
    horizontalAlignment: Qt.AlignHCenter
    verticalAlignment: Qt.AlignVCenter
    MouseArea {
        anchors.fill: parent
        onClicked:  {
            secondText.click()
            secondText.sigValue(mouseX)
        }
    }
}

4、Connections

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

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

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

MouseArea {
    id: area
}

Connections {
    target: area
    function onClicked(mouse) { foo(mouse) }
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1110245.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

轻舟500天搞定征程5，L2+方案明年交付

轻舟500天搞定征程5，L2+方案明年交付

作者 | Amy 编辑 | 德新 2022年L2商业化赛道发展得如火如荼&#xff0c;各家主机厂和智驾供应商的高速NOA相继迸发。 华为、小鹏率先在上海、广州多地开放城市NOA&#xff0c;蔚来、理想紧随其后。宝骏云朵联合大疆车载&#xff0c;吉利博越L联合地平线&#xff0c;将搭载高…
阅读更多...
MySQL服务安装与登录

MySQL服务安装与登录

&#xff08;1&#xff09;以管理员身份启动命令提示符&#xff1a; &#xff08;2&#xff09;定位到安装目录的bin目录下&#xff08;根据自己的安装路径进行调整即可&#xff09;。先输入“d:”&#xff0c;定位到d盘&#xff0c;输入cd空格文件路径&#xff08;直接复制粘贴…
阅读更多...
Windows系统安装ESP32 ESP-IDF开发环境

Windows系统安装ESP32 ESP-IDF开发环境

陈拓 2023/10/07-2023/10/10 1. 概述 在《用乐鑫国内Gitee镜像搭建ESP32开发环境》 https://blog.csdn.net/chentuo2000/article/details/113424934?spm1001.2014.3001.5502 一文中我们讲述了Linux环境下ESP32开发工具ESP-IDF的安装。 本文讲述Windows环境下ESP32开发工具…
阅读更多...
C#使用PPT组件的CreateVideo方法生成视频

C#使用PPT组件的CreateVideo方法生成视频

目录 需求 实现 CreateVideo方法 关键代码 CreateVideoStatus 其它 需求 我们在使用PowerPoint文档时&#xff0c;经常会使用其导出功能以创建视频&#xff0c;如下图&#xff1a; 手工操作下&#xff0c;在制作好PPT文件后&#xff0c;点击文件 -> 导出 -> 创建视…
阅读更多...
new、delete与构造、析构函数的关系

new、delete与构造、析构函数的关系

一、指针对象的动态建立与释放 动态建立&#xff1a;new 实现&#xff0c;为指针对象分配空间 动态释放&#xff1a;delete 实现&#xff0c;为指针对象释放空间 #include<iostream> using namespace std; class A{private:int a;public:A(int a10):a(a1){cout<<&…
阅读更多...
pyflink 环境测试以及测试案例

pyflink 环境测试以及测试案例

1. py 的 环境以来采用Anaconda环境包 安装版本&#xff1a;https://www.anaconda.com/distribution/#download-section Python3.8.8版本&#xff1a;Anaconda3-2021.05-Linux-x86_64.sh 下载地址 https://repo.anaconda.com/archive/ 2. 安装 bash Anaconda3-2021.05-Linux-x…
阅读更多...
基于SSM+Vue的汽车服务商城系统

基于SSM+Vue的汽车服务商城系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…
阅读更多...
SpringFrameWork之注解类管理Bean

SpringFrameWork之注解类管理Bean

1 Bean 注解方式的扫描 1.1 .1注解理解 和 XML 配置文件一样&#xff0c;注解本身并不能执行&#xff0c;注解本身仅仅只是做一个标记&#xff0c;具体的功能是框架检测到注解标记的位置&#xff0c;然后针对这个位置按照注解标记的功能来执行具体操作。 1.1.2 扫描理解 Sp…
阅读更多...
怎么使用LightPicture开源搭建图片管理系统并远程访问？【搭建私人图床】

怎么使用LightPicture开源搭建图片管理系统并远程访问？【搭建私人图床】

文章目录 1.前言2. Lightpicture网站搭建2.1. Lightpicture下载和安装2.2. Lightpicture网页测试2.3.cpolar的安装和注册 3.本地网页发布3.1.Cpolar云端设置3.2.Cpolar本地设置 4.公网访问测试5.结语 1.前言 现在的手机越来越先进&#xff0c;功能也越来越多&#xff0c;而手机…
阅读更多...
【单片机毕业设计】【hj-006-1】烟雾、甲烷气体检测 | 空气质量检测 | 有害气体检测

【单片机毕业设计】【hj-006-1】烟雾、甲烷气体检测 | 空气质量检测 | 有害气体检测

一、基本介绍 项目名&#xff1a; 基于单片机的烟雾、甲烷气体检测系统设计 基于单片机的空气质量检测 系统设计 基于单片机的有害气体检测系统设计 项目编号&#xff1a;mcuclub-hj-006-1 单片机类型&#xff1a;STM32F103C8T6 具体功能&#xff1a; 1、通过MQ-2检测烟雾值&…
阅读更多...
人防行业通信系统

人防行业通信系统

深圳市华脉智联科技有限公司是一家拥有核心自主知识产权的高科技企业&#xff0c;公司致力于公网对讲、融合通信、应急通信、执法调度等领域的系统和技术的开发和探讨&#xff0c;为行业用户提供一整套以通信为基础&#xff0c;软硬件结合的实战解决方案。华脉智联始终坚持将解…
阅读更多...
2023年淘宝天猫双十一什么时候开始？天猫双十一满减活动规则和优惠力度是多少

2023年淘宝天猫双十一什么时候开始？天猫双十一满减活动规则和优惠力度是多少

2023年天猫淘宝双十一活动将在10月24日20时开启&#xff0c;同时包含两波正式开买时间点&#xff0c;分别为10月31日20时和11月10日20时。 一、2023天猫淘宝双十一活动时间表 第一波 (1)预售 预售预热&#xff1a;2023年10月24日14:00:00-2023年10月24日19:59:59 定金*支付…
阅读更多...
工控机通过Profinet转Modbus RTU网关与报警控制仪通讯配置案例

工控机通过Profinet转Modbus RTU网关与报警控制仪通讯配置案例

本文将以工控机通过Profinet转Modbus RTU网关&#xff08;XD-MDPN100&#xff09;与报警控制仪通讯的实际案例为例&#xff0c;介绍Profinet转Modbus RTU网关&#xff08;XD-MDPN100&#xff09;在工业通信的应用。 在某个生产车间的报警系统中&#xff0c;报警控制仪是起到监…
阅读更多...
嘉立创新建元件封装进行DRC检测发现无封装

嘉立创新建元件封装进行DRC检测发现无封装

新建元件和封装 元件就是原理图中放的主要是引脚对应正确&#xff0c;封装就是pcb设计中对应元件实际放置的焊盘。所以元件和封装需要关联 关联的时候需要注意 有时候出现元件无封装的情况&#xff0c;一般是因为没有管理封装&#xff08;简单失误&#xff09;或者是关联封…
阅读更多...
【NPM】vuex 数据持久化库 vuex-persistedstate

【NPM】vuex 数据持久化库 vuex-persistedstate

在 GitHub 上找到&#xff1a;vuex-persistedstate。 安装 npm install --save vuex-persistedstate使用 import { createStore } from "vuex"; import createPersistedState from "vuex-persistedstate";const store createStore({// ...plugins: [cr…
阅读更多...
echarts设置竖向不同区间范围颜色，并且x轴自定义轴线刻度范围

echarts设置竖向不同区间范围颜色，并且x轴自定义轴线刻度范围

需求&#xff1a;设置竖向范围区间&#xff0c;不同范围区间颜色不同并且提示信息不同&#xff0c;之后修改x轴的固定间距范围&#xff0c;让0-200-400-600改为0-340-476-754这种&#xff0c;在这我是markLine的方式实现的&#xff0c;这边我还用到x轴的翻转所以显示的是镜像的…
阅读更多...
视频SDK开发，多平台SDK快速接入

视频SDK开发，多平台SDK快速接入

随着科技的不断发展&#xff0c;视频已经成为了企业业务中不可或缺的一部分。无论是在线教育、企业培训还是产品展示&#xff0c;视频都发挥着至关重要的作用。为了满足企业对视频应用的需求&#xff0c;美摄视频SDK应运而生&#xff0c;为企业提供了一站式的视频解决方案。 一…
阅读更多...
聊一聊Spring 事务的相关操作

聊一聊Spring 事务的相关操作

Java全能学习面试指南&#xff1a;https://javaxiaobear.cn 1、JdbcTemplate 1.1、简介 Spring 框架对 JDBC 进行封装&#xff0c;使用 JdbcTemplate 方便实现对数据库操作 1.2、准备工作 ①搭建子模块 搭建子模块&#xff1a;spring-jdbc-tx ②加入依赖 <dependenci…
阅读更多...
21天打卡进阶Python基础操作

21天打卡进阶Python基础操作

python21天打卡day3-python数据类型 #int a2 print(a) print(type(a)) #float a2.2 print(a) print(type(a)) #string anihao print(a) print(type(a)) #list a[1,2,3,4] print(a) print(a[0]) print(type(a)) #元组 a(1,2) print(a) print(type(a)) #字典dict a{name:yangyal,…
阅读更多...
Unity3D 如何制作带厚度的透明图片详解

Unity3D 如何制作带厚度的透明图片详解

Unity3D是一款功能强大的游戏开发引擎&#xff0c;可以实现各种复杂的游戏效果。本文将详细介绍如何使用Unity3D制作带厚度的透明图片&#xff0c;并提供代码实现。 对惹&#xff0c;这里有一个游戏开发交流小组&#xff0c;希望大家可以点击进来一起交流一下开发经验呀&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023