[QDS]从零开始，写第一个Qt Design Studio到程序调用的项目

前言

最近在使用Qt Design Studio进行开发，但是简中网上要不就是只搜得到Qt Designer(Qt Creator内部库)，要不就只搜得到一点营销号不知道从哪里搬来的账号，鉴于Qt Design Studio是一个这么强大的软件，自然是需要来进行一下小小的实践的。

所以开了这篇文章，方便没有使用过Qt Design Studio 和 QML的开发者也可以快速上手QDS(Qt Design Studio)。在本文中，你将学会如何使用QDS开发一个简单的QML程序，与你的C++后端代码进行交流。

下文中将使用QDS指代Qt Design Studio.

下载和安装

这里先说一下这里使用的Qt版本，我现在这里使用的是Qt 6.8.0 + Qt Design Studio 4.1.1 LTS

安装Qt Design Studio我是用的Qt本身的安装包，在安装的时候它把QDS当成了一个组件，是由你个人选择来安装的

需要注意的是，这里需要选择4.1.1 LTS而不是 4.6.2，主要原因是4.1.1LTS版首先它是LTS，其次它还支持中文（虽然真正支持的中文没几个字。。。）所以这里我们选4.1.1，先上手，等之后有什么新的功能你确实一定要移动到4.6.2再移动也不迟。

第一个项目

前端准备

QDS界面如图，你可以试着创建一个项目，这里我们点Create Project…

这个界面没什么好说的改改设定就行了，然后我们点击右下角Create，这样我们就进入了我们第一个项目，也就是QDS的Hello World

点击左上角这个三角形，我们可以运行这个QML项目

我们需要知道的是，整个QDS项目的入口点其实是App.qml，而App.qml中的内容很简单，他只是简单调用了一个Screen01，这个Screen01我们先直接删掉，在这个App.qml的Window中先来写我们自己的东西。


import QtQuick 6.5
import UntitledProject

Window {
    width: 500
    height: 200
    id:root
    visible: true
    title: "UntitledProject"


}

这是一个带动画的小按钮项目，但是我们现在不需要这么复杂的项目，我们可以来一个最简单的项目，这个项目需要做三件事

  • 能够调用后端的函数，并给定参数
  • 能调用后端的函数，并接受返回值
  • 能接受后端的信号

为了完成这个实践，我们需要三个控件

在视图 - 视图 - 选中2D，可以获得当前开发控件的2D展开图,同时我们在视图-视图-选中Compoents，可以获得一些预设的控件，我们先简单拖几个按钮、Text、TextEdit上去试试

搞几个控件上去

这里先说一下这个Close按钮怎么实现

我们看到这个App.qml根元素是Window，我现在给这个Window一个id:root，然后我们可以在Button的属性中添加一个onClicked信号，这个信号是点击按钮时触发的，在onClicked里面调用root.close()就可以了

    Button {
        id: button
        x: 413
        y: 16
        width: 63
        height: 33
        text: qsTr("Close")
        onClicked: {
        root.close()
        }
    }

那么这个简单的QDS项目就算创建完成了，接下来我们要将这个QDS项目移植到C++项目去，因为我不太会用Qt Creator，我这里使用Visual Studio 2022 + Qt VSTool来演示Qt项目的结合。

现在我们就可以在QDS中导出这个项目了

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

它这里支持的导出方式还挺多的，我这里为了方便使用，直接以QRC的形式导出。

这里导出了之后，我们可以准备一下C++的后端了。

后端准备

这里直接创建一个空的Qt Quick项目 QDS_Totour(打错了不用在意)

这里可以直接将QDS的项目整个放在后端的文件夹内，我这里是直接将其放在了 QDS_Toutor/qml项目下，当然了也可以先创建后端项目，然后再使用QDS创建一个项目直接创建在后端项目内也是可以的

现在进入到我们的Qt项目内，将QDS_Toutor/qml下的UntitledProject.qrc(前端准备中导出的qrc文件)引入到Qt C++项目中去

可以看到此时QRC文件已经帮我们的项目组织好了整个QDS项目的依赖，现在我们只需要正常调用就可以了。我们找到QDS_Toutor的main文件，并作出对应的修改

int main(int argc, char *argv[])
{
#if defined(Q_OS_WIN) && QT_VERSION_CHECK(5, 6, 0) <= QT_VERSION && QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    //原始导入，现在改成新的目录
    //engine.load(QUrl(QStringLiteral("qrc:/qt/qml/qds_toutor/main.qml")));
    engine.load(QUrl(QStringLiteral("qrc:/content/App.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

我们尝试运行一下，这个时候项目就可以直接运行了。

前后端连接

现在我们需要进行前后端连接。在这里进行前后端连接需要一个单独的类，用来进行前后端的信号连接，我们管这个类暂且叫它Connector，需要注意的是这需要是一个QObject的子类，虽然你从Qt Creator创建出来的类大概率是一个 QObject的子类。

我们来给这个Connector写几个简单的方法，需要注意的是，这里的前后端的连接中需要使用到一个关键字Q_INVOKABLE 来修饰这个方法，这个关键字的作用是让QML可以调用这个方法。

这个主动上发的信号我这里会内部实现一个QTimer，每隔一秒发送一次sig_updateValue信号，为了更好的演示效果，我这里就不把QTimer的实现写进来了

#include <QObject>

class Connector  : public QObject
{
	Q_OBJECT

public:
	Connector(QObject *parent);
	~Connector();

	Q_INVOKABLE void SetValue(const QString& string);
	Q_INVOKABLE QString getValue();


signals:
	Q_INVOKABLE void sig_updateValue(const QString& string);
private:
	QString string;

};

OK，现在万事俱备，只需要将Qt中的类注册到QML中去，暴露给QML系统就可以了，现在我们回到main.cpp，那个创建engine的地方，我们在这里将一个Connector的对象注册进到engine中去

int main(int argc, char *argv[])
{
#if defined(Q_OS_WIN) && QT_VERSION_CHECK(5, 6, 0) <= QT_VERSION && QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    //engine.load(QUrl(QStringLiteral("qrc:/qt/qml/qds_toutor/main.qml")));

    //创建一个Connector对象，并注册connector对象到QML中
	Connector* connector = new Connector(nullptr);
	engine.rootContext()->setContextProperty("connector", connector);
    engine.load(QUrl(QStringLiteral("qrc:/content/App.qml")));

    if (engine.rootObjects().isEmpty())
        return -1;
    return app.exec();
}

现在我们的这个类就已经暴露在这个QML项目下了，现在我们回到QDS，从QDS中打开我们移植到C++项目中的QDS项目，再来进行编辑，现在我们实际上就可以直接在App.qml中直接调用connector这个对象了

有关主动调用的函数，我们直接调用connector的方法就好了，如下所示

 Button {
        id: button1
        x: 43
        y: 108
        width: 67
        height: 28
        text: qsTr("写入参数")
        onClicked:{
        var string = textEdit.text
        connector.setValue(string)
        }
    }

    Button {
        id: button2
        x: 126
        y: 108
        width: 64
        height: 28
        text: qsTr("读取参数")

        onClicked:{

        var string = connector.getValue()
        text1.text = string
        }
    }

这里已经可以直接将connector 的 setValue和getValue方法调用到了

有关从C++后端来的信号，我们这里需要写一个Connector来进行连接

 Connections{
    target:connector
    onSig_updateValue: {
        text2.text = strMessage
        console.log("Received signal from C++ with index:", strMessage)
    }
}

自此，这个项目就可以正常运行了

完成了基本功能，从UI界面上主动向下申请数据、以及后台向前台主动发送数据，这个项目算是完成了。

Github Link:LeventureQys/QDS_Toutor

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

（三）Sping Boot学习——升级jdk1.8-jdk18

（三）Sping Boot学习——升级jdk1.8-jdk18

1.修改系统环境变量。 2.idea中修改配置。 3.项目setting中设置修改 4.更新后还要重新下载依赖mvn clean install &#xff0c;并且记住reload 项目。同时查看java -version查看一下jdk版本。
阅读更多...
基于FPGA的2FSK调制-串口收发-带tb仿真文件-实际上板验证成功

基于FPGA的2FSK调制-串口收发-带tb仿真文件-实际上板验证成功

基于FPGA的2FSK调制 前言一、2FSK储备知识二、代码分析1.模块分析2.波形分析 总结 前言 设计实现连续相位 2FSK 调制器&#xff0c;2FSK 的两个频率为:fI15KHz&#xff0c;f23KHz&#xff0c;波特率为 1500 bps,比特0映射为f 载波&#xff0c;比特1映射为 载波。 1&#xff09…
阅读更多...
WPF中如何让Textbox显示为一条直线

WPF中如何让Textbox显示为一条直线

由于Textbox直接使用是一条直线 设置如下代码 可以让Textbox变为直线输入 <Style TargetType"TextBox"x:Key"UsernameTextBoxStyle"><Setter Property"Template"><Setter.Value><ControlTemplate TargetType"{x:Typ…
阅读更多...
周志华深度森林deep forest（deep-forest）最新可安装教程，仅需在pycharm中完成，超简单安装教程

周志华深度森林deep forest（deep-forest）最新可安装教程，仅需在pycharm中完成，超简单安装教程

1、打开pycharm 没有pycharm的&#xff0c;在站内搜索安装教程即可。 2、点击“文件”“新建项目” 3、创建项目&#xff0c;Python版本中选择Python39。如果没有该版本&#xff0c;选择下面的Python 3.9下载并安装。 4、打开软件包&#xff0c;搜索“deep-forest”软件包&am…
阅读更多...
【代码pycharm】动手学深度学习v2-08 线性回归 + 基础优化算法

【代码pycharm】动手学深度学习v2-08 线性回归 + 基础优化算法

课程链接 线性回归的从零开始实现 import random import torch from d2l import torch as d2l# 人造数据集 def synthetic_data(w,b,num_examples):Xtorch.normal(0,1,(num_examples,len(w)))ytorch.matmul(X,w)bytorch.normal(0,0.01,y.shape) # 加入噪声return X,y.reshape…
阅读更多...
即时通讯平台-音视频即时通讯平台就选WorkPlus

即时通讯平台-音视频即时通讯平台就选WorkPlus

在现代社会&#xff0c;企业和组织对沟通的需求日益增加&#xff0c;尤其是在瞬息万变的商业环境中&#xff0c;音视频即时通讯已成为沟通的主流形式。WorkPlus作为一款专注于音视频即时通讯的平台&#xff0c;凭借其强大的功能和出色的用户体验&#xff0c;成为了企业和团队的…
阅读更多...
亚信安全与飞书达成深度合作

亚信安全与飞书达成深度合作

近日&#xff0c;亚信安全联合飞书举办的“走近先进”系列活动正式走进亚信。活动以“安全护航信息化 共筑数字未来路”为主题&#xff0c;吸引了众多数字化转型前沿企业的近百位领导参会。作为“走近先进”系列的第二场活动&#xff0c;本场活动更加深入挖掘了数字化转型的基础…
阅读更多...
Fakelocation Server服务器/专业版 ubuntu

Fakelocation Server服务器/专业版 ubuntu

前言:需要Ubuntu系统 Fakelocation开源文件系统需求 Ubuntu | Fakelocation | 任务一 任务一 更新Ubuntu&#xff08;安装下载不再赘述&#xff09; sudo -i # 提权 sudo apt update # 更新软件包列表 sudo apt upgrade # 升级已安装的软…
阅读更多...
基于数据融合的智能家居环境监测系统研究与设计（论文+源码）

基于数据融合的智能家居环境监测系统研究与设计（论文+源码）

1总体方案设计 本次基于数据融合的智能家居环境监测系统的设计&#xff0c;其系统总体架构如图2.1所示&#xff0c;整个系统在器件上包括了主控制器STM32F103单片机&#xff0c;MQ可燃气体传感器&#xff0c;光照传感器&#xff0c;DHT11温湿度传感器&#xff0c;风扇&#xf…
阅读更多...
风尚云网前端学习：一个简易前端新手友好的HTML5页面布局与样式设计

风尚云网前端学习：一个简易前端新手友好的HTML5页面布局与样式设计

风尚云网前端学习&#xff1a;一个简易前端新手友好的HTML5页面布局与样式设计 简介 在前端开发的世界里&#xff0c;HTML5和CSS3是构建现代网页的基石。本文将通过一个简单的HTML5页面模板&#xff0c;展示如何使用HTML5的结构化元素和CSS3的样式特性&#xff0c;来创建一个…
阅读更多...
tauri2.0版本开发苹果ios和安卓android应用，环境搭建和最后编译为apk

tauri2.0版本开发苹果ios和安卓android应用，环境搭建和最后编译为apk

官网链接&#xff1a;What is Tauri? | Tauri 初始准备 rust版本一定要1.77.2以上的版本&#xff0c;查看版本和升级版本&#xff1a; 升级命名&#xff1a; rustup update 不然会报错&#xff1a; error: package tauri-plugin-shell v2.0.2 cannot be built because it r…
阅读更多...
【PHP】 环境以及插件的配置，自学笔记（一）

【PHP】 环境以及插件的配置，自学笔记（一）

文章目录 环境的准备安装 XAMPPWindowMacOS 配置开发环境Vscode 关于 PHP 的插件推荐Vscode 配置 php 环境Apache 启动Hello php配置热更新 参考 环境的准备 下载 XAMPP , 可以从 官网下载 https://www.apachefriends.org/download.html 安装 XAMPP XAMPP 是一个跨平台的集成开…
阅读更多...
部署实战(二)--修改jar中的文件并重新打包成jar文件

部署实战(二)--修改jar中的文件并重新打包成jar文件

一.jar文件 JAR 文件就是 Java Archive &#xff08; Java 档案文件&#xff09;&#xff0c;它是 Java 的一种文档格式JAR 文件与 ZIP 文件唯一的区别就是在 JAR 文件的内容中&#xff0c;多出了一个META-INF/MANIFEST.MF 文件META-INF/MANIFEST.MF 文件在生成 JAR 文件的时候…
阅读更多...
Alluxio在小红书的实践：加速云端机器学习

Alluxio在小红书的实践：加速云端机器学习

分享嘉宾 李亚斌 小红书大数据技术专家 负责小红书多云统一数据加速层的建设 关于小红书 小红书是年轻人的生活记录、分享平台&#xff0c;用户可以通过短视频、图文等形式记录生活点滴&#xff0c;分享生活方式。 分享提纲 本文主要介绍小红书多云统一数据加速层的内容&…
阅读更多...
JavaScript的let、var、const

JavaScript的let、var、const

这张图片主要介绍了JavaScript中的三种变量声明方式&#xff1a;let、var和const。 1. let 含义&#xff1a;let是现在实际开发中常用的变量声明方式。特点&#xff1a; 块级作用域&#xff1a;let声明的变量只在其所在的块级作用域内有效。例如&#xff1a;{let x 10; } co…
阅读更多...
ensp动态路由OSPF实验

ensp动态路由OSPF实验

一、实验目的 1、熟练掌握交换机的基本配置命令 2、熟练掌握ospf的使用规则 3. 熟练掌握交换机端口模式 二、实验内容 需求&#xff1a; 根据要求利用现有实验设备组建小型局域网 实验设备&#xff1a; 交换机S37002台&#xff1b;交换机S57002台&#xff1b;路由器2台。…
阅读更多...
Python绘制太极八卦

Python绘制太极八卦

文章目录 系列目录写在前面技术需求1. 图形绘制库的支持2. 图形绘制功能3. 参数化设计4. 绘制控制5. 数据处理6. 用户界面 完整代码代码分析1. rset() 函数2. offset() 函数3. taiji() 函数4. bagua() 函数5. 绘制过程6. 技术亮点 写在后面 系列目录 序号直达链接爱心系列1Pyth…
阅读更多...
package.json中^1.x.x、~1.x.x、1.x.x有什么区别

package.json中^1.x.x、~1.x.x、1.x.x有什么区别

目录 包版本号的语义化 包版本号的符号 举例 包版本号的语义化 在开始回答这个问题之前&#xff0c;先简单介绍一下包版本号的语义化。 在npm中&#xff0c;包的版本号通常遵循语义化版本规范&#xff08;Semantic Versioning&#xff09;&#xff0c;即采用 major.minor.p…
阅读更多...
力扣hot100--＞排序

力扣hot100--＞排序

排序 1. 56. 合并区间 中等 以数组 intervals 表示若干个区间的集合&#xff0c;其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间&#xff0c;并返回 一个不重叠的区间数组&#xff0c;该数组需恰好覆盖输入中的所有区间 。 示例 1&#xff1a; 输…
阅读更多...
一分钟学习数据安全——数据安全风险的系统化应对思路

一分钟学习数据安全——数据安全风险的系统化应对思路

数据是组织的重要资产&#xff0c;未经授权的数据访问可能导致数据泄露、数据篡改、隐私侵犯和合规风险等问题。企业可以通过数据访问控制来提高信息系统在数据全生命周期管理中的安全性。企业可以引入IAM系统&#xff0c;来控制身份来管理权限。通过对用户访问权限的管理和合适…
阅读更多...
最新文章

Copyright @ 2022~2023