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 语法的小伙伴也可以非常快速的完成一个界面
在这里插入图片描述

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

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

相关文章

(湖科大教书匠)计算机网络微课堂(下)

第四章、网络层 网络层概述 网络层主要任务是实习网络互连,进而实现数据包在各网络之间的传输 因特网使用TCP/IP协议栈 由于TCP/IP协议栈的网络层使用网际协议IP,是整个协议栈的核心协议,因此TCP/IP协议栈的网络层常称为网际层 网络层提供…

1.3 金融数据可视化

跳转到根目录:知行合一:投资篇 已完成: 1.1 编程基础   1.1.1 投资-编程基础-numpy   1.1.2 投资-编程基础-pandas 1.2 金融数据处理 1.3 金融数据可视化 文章目录 1. 金融数据可视化1.1. matplotlib1.1.1. 沪深300走势图1.1.2. 日线均线…

D50|单调栈

739.每日温度 初始思路&#xff1a; 暴力解法但是会超时。 class Solution {public int[] dailyTemperatures(int[] temperatures) {int[] answer new int[temperatures.length];for(int i 0;i<temperatures.length;i){for(int j i;j<temperatures.length;j){if(te…

C# 2中的一些小特性

一、局部类型 在C#当中有这样一个关键字partial 用来声明类&#xff0c;结构&#xff0c;接口分为多个部分来声明。使用场景可以一部分类中写实例方法&#xff0c;一部分写属性&#xff0c;我在实际工作测试中就是将属性与实际方法是分开的。相互之间的成员互相通用。 举个例子…

C# 反射的终点:Type,MethodInfo,PropertyInfo,ParameterInfo,Summry

文章目录 前言反射是什么&#xff1f;常用类型操作SummryPropertyInfoMethodInfo无参函数运行 有参函数运行,获取paramterInfo 总结 前言 我之前写了一篇Attribute特性的介绍&#xff0c;成功拿到了Attribute的属性&#xff0c;但是如果把Attribute玩的溜&#xff0c;那就要彻…

关键字:instanceof关键字

在 Java 中&#xff0c;instanceof关键字用于检查一个对象是否是某个特定类或其子类的实例。它的语法如下&#xff1a; 其中&#xff0c;Object是要检查的对象&#xff0c;Class是要检查的类或接口。 instanceof关键字的返回值是一个布尔值&#xff0c;如果对象Object是类Cla…

基于Spring Boot的美妆分享系统:打造个性化推荐、互动社区与智能决策

基于Spring Boot的美妆分享系统&#xff1a;打造个性化推荐、互动社区与智能决策 1. 项目介绍2. 管理员功能2.1 美妆管理2.2 页面管理2.3 链接管理2.4 评论管理2.5 用户管理2.6 公告管理 3. 用户功能3.1 登录注册3.2 分享商品3.3 问答3.4 我的分享3.5 我的收藏夹 4. 创新点4.1 …

【UWB定位源码】工厂企业人员定位系统源码,实现安全区域管控、人员在岗监控、车辆实时轨迹监控

UWB高精度定位系统源码&#xff0c;企业工厂人员定位系统源码 概念&#xff1a; UWB (ULTRA WIDE BAND, UWB) 技术是一种无线载波通讯技术&#xff0c;它不采用正弦载波&#xff0c;而是利用纳秒级的非正弦波窄脉冲传输数据&#xff0c;因此其所占的频谱范围很宽。 UWB的主要特…

2023-RunwayML-Gen-2 AI视频生成功能发展历程

RunwayML是一个人工智能工具&#xff0c;它为设计师、艺术家和创意人士提供了一种简单的方式来探索和应用机器学习技术。 RunwayML官方网页地址&#xff1a;Runway - Advancing creativity with artificial intelligence. RunwayML专区RunwayML-喜好儿aigcRunwayML 是一种先进…

Java ArrayList 面试题

Java ArrayList 面试题 文章目录 Java ArrayList 面试题ArrayList源码分析成员变量构造方法ArrayList源码分析面试题-ArrayList listnew ArrayList(10)中的list扩容几次面试题-如何实现数组和List之间的转换 ArrayList源码分析 分析ArrayList源码主要从三个方面去翻阅&#xf…

MySQL数据库索引优化实战

目录 一、前言 二、准备工作 2.1 用户表&#xff08;TB_USER) 2.2 商品表&#xff08;TB_SKU) 2.3 订单表&#xff08;TB_ORDER&#xff09; 三、实例分析 3.1 索引提升查询性能 3.2 多表查询 3.3 索引失效 四、总结 一、前言 在数据库的应用中&#xff0c;性能优化…

SpringBoot从配置文件中获取属性的方法

方式一&#xff1a;Value 基本类型属性注入&#xff0c;直接在字段上添加Value("\${xxx.xxx}")即可&#xff0e;注意这里用的是$&#xff0c;而不是&#xff03;&#xff0c;Value注入的属性&#xff0c;一般其他属性没有关联关系。 配置文件 user:name: Manaphya…

【搜索引擎】elastic search核心概念

前言 本文不涉及ES的具体安装下载、操作、集群的内容&#xff0c;这部分内容会放在后面一篇文章中。本文只包含ES的核心理论&#xff0c;看完本文再去学ES的细节会事半功倍。 目录 1.由日志存储引出的问题 2.什么是ES&#xff1f; 3.ES的数据结构 4.ES的核心原理 5.联系作…

高效工具汇总,让学习和办公飞起来

目录 1、寻找论文&#xff0c;效率很高2、学习各类编程的地方 1、寻找论文&#xff0c;效率很高 AMiner&#xff0c;由清华大学计算机科学与技术系的唐杰教授团队开发的一个显著的学术搜索和挖掘系统。系统提供了一整套功能以协助学术研究&#xff0c;包括研究人员档案、专家搜…

MySQL8.0安装教程

Mysql安装教程 1.Mysql下载 进入官网https://www.mysql.com/进行下载&#xff1a; 2.Mysql安装 双击文件进行安装&#xff0c;选择默认安装方式&#xff1a; 这里列出了五种安装类型&#xff1a; Developer Default&#xff1a;默认安装类型&#xff1b;Server only&#x…

性能测试浅谈

早期的性能测试更关注后端服务的处理能力。 一个用户去访问一个页面的请求过程&#xff0c;如上图。 数据传输时间 当你从浏览器输入网址&#xff0c;敲下回车&#xff0c;开始... 真实的用户场景请不要忽视数据传输时间&#xff0c;想想你给远方的朋友写信&#xff0c;信件需…

java基础之String的不可变性

目录 概述 String是如何实现不可变的 String为何设计成不可变的 1.缓存和性能优化 2.安全性 3.线程安全性 4.API设计和预测性能 概述 String类的不可变性意味着一旦创建了一个字符串对象&#xff0c;它的值就不能被修改。 String是如何实现不可变的 查看源码 public …

Django 6 后台与便签

1. 什么是后台管理 后台管理是网页管理员利用网页的后台程序管理和更新网站上网页的内容。各网站里网页内容更新就是通过网站管理员通过后台管理更新的。 2. 创建超级用户 1. python .\manage.py createsuperuser 2. 输入账号密码等信息 Username (leave blank to use syl…

Gromacs make_ndx建组问题

1. 选择特定分子或原子&#xff1a; gmx make_ndx -f input.gro -o output.ndx这将打开交互式界面&#xff0c;您可以在其中选择要包含在索引文件中的分子和原子。按照提示进行操作&#xff0c;选择适当的分组。 2. 手动创建索引文件&#xff1a; 您还可以手动创建一个文本文件…

佳能G3800彩色喷墨多功能一体打印机报5B00错误代码处理方法

5B00错误代码的含义 5B00错误代码是指佳能G3800打印机的“废墨仓已满”。这个废墨仓是打印机内部的一个部件&#xff0c;主要用于收集打印过程中产生的废墨。当废墨仓已满时&#xff0c;打印机就会报5B00错误代码。 佳能G3800彩色喷墨多功能一体打印机报5B00错误代码处理办法 …