QML 项目中使用 Qt Design Studio 生成的UI界面

作者:billy
版权声明:著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处

前言

今天来和大家聊一下 Qt Design Studio 这个软件。这个软件的主要功能是用来快速完成 UI 界面,就和 widget 中的 designer 设计器一样,可以把控件直接拖到界面上,通过修改属性快速完成一个界面,通过预览非常直观的看到界面效果,效率可以说是非常高的。

不同的是,Qt Design Studio 生成的是 .ui.qml 文件,看后缀我们就知道这是用在 Qt Quick 项目中的。相当于原来的 qt quick designer,目前 qt quick designer 已经移除了,独立出来变成了 Qt Design Studio 这个软件。博主和 Qt 的技术人员沟通,他们如此设计的初衷是想把界面设计和逻辑开发完全分割开来,通过 Qt Design Studio 生成界面这部分的工作完全可以交给美工来完成,工程师只需要完成逻辑处理绑定到相应的事件上即可。

很多小伙伴会说原来的 qt quick designer 不好用但是还会用,现在的 Qt Design Studio 很方便但是不会用,不知道如何和 Qt Quick 项目结合来使用,这里博主整了一下大致的使用流程,希望对大家有用。

版本选择

目前 Qt Design Studio 4.2 不支持 Qt5
1)使用 Qt 6.x 版本的可以使用最新的 Qt Design Studio 4.2
2)Qt 5.x 版本的可以使用 Qt Design Studio 4.1.1

我目前的环境是 Qt 5.15.2 + Qt Design Studio 4.1.1

操作流程

1. 新建一个 Qt Quick 工程,取名叫 StudioUIToPro

在这里插入图片描述

2. 删除 main.qml 文件

到根目录下我们可以看到有一个资源文件,资源文件中有一个 main.qml 文件,也就是运行软件时显示的 UI 界面,我们现在的目的是在项目中显示 Qt Design Studio 中生成的 UI 界面,所以不需要 main.qml 了,直接删除
在这里插入图片描述
在这里插入图片描述

3. 使用 Qt Design Studio 在 StudioUIToPro 工程下新建 StudioUI 工程

在这里插入图片描述
在这里插入图片描述

4. 在 StudioUIToPro 中的资源文件中添加 StudioUI 生成的 qml 文件

StudioUI 生成的 qml 文件在 content 和 imports 两个文件夹下,content 下是 UI 界面文件,imports 下是自定义的模块,作为依赖也需要添加进来
在这里插入图片描述
在这里插入图片描述

5. 修改 main.cpp 中启动文件的路径

软件运行显示的UI界面是 App.qml,修改路径后运行会报错,提示没有找到模块 StudioUI
在这里插入图片描述

模块的定义在 imports\StudioUI\qmldir 文件里,所以需要把模块路况添加到程序中
在这里插入图片描述
在这里插入图片描述

6. 修复小问题

上述设置完成之后,已经可以正常运行了,点击运行显示和 Qt Design Studio 中一样的UI界面。这里还有两个小问题可以改善一下。
1)打开 App.qml 和 Screen01.ui.qml 文件仍然会显示 StudioUI 模块无法识别在这里插入图片描述
因为 qml 文件中使用的模块默认只会在 Qt 的安装路径下去查找,自己添加新的 module 之后,还需要把新模块的路径添加到查找路径中,在 pro 中添加路径如下:
QML_IMPORT_PATH += StudioUI/imports

2)有一个信号槽连接方式的错误,Qt Design Studio 中生成的信号槽连接方式用的是 Qt5 的方式,而 Qt 5.15 和 Qt 6 中连接方式略有差异,需要把槽函数改为 function 的形式
在这里插入图片描述
在这里插入图片描述

7. 测试

至此已完成所有修改,可以进行快乐的开发测试了,我们在 Qt Design Studio 中随意的拖放控件到界面上,如下所示
在这里插入图片描述

在 Qt Creator 中运行即可得到最新的 UI 界面,这样就可以和 widget 中的 designer 一样使用了,对于不熟悉 QML 语法的小伙伴也可以非常快速的完成一个界面
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue.js 中使用 Watch 选项实现动态问题判断与展示答案

组件结构 以下是组件的基本结构&#xff1a; <template><div><!-- 输入框&#xff0c;用于输入问题 --><p>提出一个是/否问题&#xff1a;<input v-model"question" :disabled"loading" /></p><!-- 显示答案 --&…

栈实现后缀表达式的计算

后缀表达式计算 过程分析 中缀表达式 &#xff08;15&#xff09;*3 > 后缀表达式 153* (可参考这篇文章&#xff1a;中缀转后缀) 第一步&#xff1a;我们从左至右扫描 后缀表达式(已经存放在一个字符数组中)&#xff0c;遇到第一个数字字符 ‘1’ 放入栈中第二步&#xf…

市场复盘总结 20240103

仅用于记录当天的市场情况,用于统计交易策略的适用情况,以便程序回测 短线核心:不参与任何级别的调整 昨日回顾: 方法一:指标选股 select * from dbo.ResultAll where 入选类型 like %指标选股% and 入选日期=20240103;方法二:趋势选股法 1、最低价持续3日上涨 2、均价…

新的一年,新的征程,35岁,再出发!!

2024&#xff0c;迈入新的征程&#xff01;35岁是人生的一个重要阶段&#xff0c;是积累经验、提升自我、迎接挑战的黄金时期&#xff0c;在接下来的日子&#xff1a; 设定目标&#xff1a;明确自己的长期和短期目标&#xff0c;确保自己始终朝着正确的方向前进。目标可以是职…

jmeter线程组

特点&#xff1a;模拟用户&#xff0c;支持多用户操作&#xff1b;可以串行也可以并行 分类&#xff1a; setup线程组&#xff1a;初始化 类似于 unittest中的setupclass 普通线程组&#xff1a;字面意思 teardown线程组&#xff1a;环境恢复&#xff0c;后置处理

机器视觉系统选型-选型-总结

一&#xff1a;明确需求 需求&#xff1a;镜面材质上的划痕检测&#xff0c;传送线上运动过程中拍照&#xff0c;无景深要求&#xff0c;传送线速度0.8m/s&#xff0c;产品间隔50mm 产品大小&#xff1a;100*80mm 工作距离限制&#xff1a;≤ 300mm 最小划痕宽度&#xff1a;0.…

shell编程二

shell 脚本规范 shell脚本文件需要以.sh结尾 第一个原因&#xff0c;让别人认的这个是shell脚本&#xff0c;sh后缀编辑时有高亮显示。 拓展名后缀,如果省略.sh则不易判断该文件是否为shell脚本 ​ # 执行脚本方式 1、 sh 脚本.sh 2、 bash 脚本.sh 3、 ./脚本.sh # 需要执行权…

NVMe SSD IO压力导致宕机案例解读-2

IOVA原理扩展介绍&#xff1a; 在Linux内核的I/O虚拟地址&#xff08;IOVA&#xff09;分配机制中存在两个影响高吞吐量I/O性能的问题 问题1&#xff1a;原有IOVA分配器在分配时可能需要对已分配的IOVA范围进行线性搜索&#xff0c;这种操作效率低下&#xff0c;尤其在大规模…

Day23

Day23 一,file类 1.1file类的初识 import java.io.File; import java.text.SimpleDateFormat;public class Test01 {/*** 知识点&#xff1a;File类* File&#xff0c;是文件和目录路径名的抽象表示* File只关注文件本身的信息&#xff0c;而不能操作文件里面的内容* * File…

AIGC时代-GPT-4和DALL·E 3的结合

在当今这个快速发展的数字时代&#xff0c;人工智能&#xff08;AI&#xff09;已经成为了我们生活中不可或缺的一部分。从简单的自动化任务到复杂的决策制定&#xff0c;AI的应用范围日益扩大。而在这个广阔的领域中&#xff0c;有两个特别引人注目的名字&#xff1a;GPT-4和D…

webpack 5 mode的作用和区别

通过选择 development, production 或 none 之中的一个&#xff0c;来设置 mode 参数&#xff0c;你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 developmen或者production. 为模块和 chunk 启用…

JUC原子操作类

原子操作类 基本类型原子类&#xff1a;AtomicInteger、AtomicBoolean、AtomicLong&#xff0c;常见API&#xff1a; get 获取当前值getAndSet 获取当前的值&#xff0c;并设置新的值getAndIncrement 获取当前的值&#xff0c;并自增getAndDecrement 获取当前的值&#xff0c;并…

洗地机怎么选?哪款洗地机好用?

选择洗地机前&#xff0c;我们需要对自己购买洗地机的需求做一个清洗的判断&#xff0c;吸尘器和扫地机智能解决地面基本的清洁问题&#xff0c;作为新兴的清洁工具洗地机越来越受大家的喜欢&#xff0c;洗地机的品类很多&#xff0c;洗地机到底该买哪款呢?我们先来看看挑选洗…

【现代控制理论】浙江大学 王建全教授

博主主页还有其他上万字精品笔记,欢迎自取 ​编辑P1[1.1.1]--视频&#xff1a;绪论.mp4_高清 1080P 11:19 这个视频是浙江大学的一门精品课程&#xff0c;主要介绍了现代控制理论的基本概念和发展历程。课程包括非线性系统理论、随机控制理论、自适应控制、模糊控制、鲁棒控制…

死锁-第三十四天

目录 什么是死锁 进程死锁、饥饿、死循环的区别 死锁产生的必要条件 什么时候会发生死锁 死锁的处理策略 本节思维导图 什么是死锁 每一个人都占有一个资源&#xff0c;同时又在等待另一个人手里的资源 进程死锁、饥饿、死循环的区别 死锁&#xff1a;各进程互相等待对…

drf序列化与序列化器的使用

序列化类的使用 使用序列化类实现五个接口功能&#xff0c;但是我们发现并没有做数据校验&#xff0c;也没有做反序列化&#xff0c;是我们自己手动去进反序列化&#xff0c;是我们自己使用for来进行拼接的&#xff0c;很不方便&#xff0c;我们可以使用一个drf自带的名叫序列…

ASP.Net实现海鲜添加(三层架构,异常处理)

演示功能&#xff1a; 点击启动生成页面 点击添加跳转新界面 此处设置文本框多行 点击Button添加 步骤&#xff1a; 1、建文件 下图是三层架构列表&#xff0c;Models里面有模拟数据库中列的类&#xff0c;DAL中有DBHelper和service,BLL中有BllManager文件用于ui界面直接调用…

SpringBoot之多环境开发配置

1 多环境开发配置 问题导入 在实际开发中&#xff0c;项目的开发环境、测试环境、生产环境的配置信息是否会一致&#xff1f;如何快速切换&#xff1f; 1.1 多环境启动配置 yaml文件多环境启动 不同环境使用—隔开 示例代码&#xff1a; spring:profiles:active: dev#生产…

易天推出10G SFP+ 可调 DWDM光模块:网络通信新升级

随着网络技术的飞速发展&#xff0c;为了满足用户对高速数据传输日益增长的需求。易天研发团队在原来的基础上推出了全新升级的10G SFP 可调 DWDM光模块&#xff0c;本文将详细介绍这款新升级光模块的特点、优势以及应用场景。 易天光通信10G SFP 可调 DWDM光模块具有出色的波…

三、C#面向对象编程(继承与多态)

在C#中&#xff0c;面向对象编程&#xff08;OOP&#xff09;是编程的基本范式&#xff0c;它使用类和对象的概念来构建软件应用程序。面向对象编程的三个主要特性是封装、继承和多态。 封装&#xff1a;封装是将数据&#xff08;属性&#xff09;和操作数据的函数&#xff08;…