QT【QWidget和QML混合使用】

article/2025/10/3 14:32:41

Qt Widgets、QML、Qt Quick的区别简述

看了之前关于 QML 的一些介绍,很多人难免会有一些疑惑:

Q1:QML 和 Qt Quick 之间有什么区别?
Q2:QtQuick 1.x 和 QtQuick 2.x 之间有什么区别?
Q3:为什么要引入 QML/Qt Quick?
Q4:Qt Widgets 和 QML/Qt Quick 哪个更好?
简述
QML VS Qt Quick
从概念上区分
从模块上区分
QtQuick 1x VS QtQuick 2x
为什么要引入 QMLQt Quick
Qt Widgets VS QMLQt Quic

1.QML VS Qt Quick

为了更精确地对两者进行说明,来看助手的描述:
QML is a user interface specification and programming language.
QML 是一种用户界面规范和标记语言,允许开发人员和设计师创建高性能、流畅的动画和视觉吸引人的应用程序。
有点意思,文档对 QML 的定义主要分为两点:
1.用户界面规范:QML 提供了一种高度可读、声明性、类似 JSON 的语法,支持与动态属性绑定相结合的命令式 JavaScript 表达式。
2.标记语言:像 C++ 一样,QML 是一种语言,文件格式以 .qml 结尾。
Qt Quick is the standard library of types and functionality for QML.
Qt Quick 是 QML 类型和功能的标准库,包括视觉类型、交互式类型、动画、模型和视图、粒子效果和着色效果
Qt Quick 使用 QML 作为声明语言,来设计以用户界面为中心的应用程序。严格来讲,Qt Quick 是一个用于 QML 的工具包,允许以 QML 语言来开发图形界面。当然,还有其他的工具包用于 QML:
图形化的(例如:Sailfish Silica 或 BlackBerry Cascades)
非图形的(例如:QBS - QMake/CMake/make…的一个替代品)
从模块上区分
QML 由 Qt QML 模块提供,QtQuick QML 库由 Qt Quick 模块提供。
Qt QML 模块:为 QML 应用程序提供了语言和引擎基础结构。
Qt Quick 模块:提供了许多可视化组件、模型视图支持、动画框架以及用于构建用户界面的更多功能。

2.QtQuick 1.x VS QtQuick 2.x

QtQuick 主要包括:QtQuick 1.x 和 QtQuick 2.x,它们之间的区别主要涉及以下内容:
全新的 Qt 版本
QtQuick 1.x 基于 Qt4.x。
QtQuick 2.x 随 Qt5.0 一起引入。
全新的绘图系统
QtQuick 1.x 使用 QGraphicsView/QPainter API 来绘制场景。
QtQuick 2.x 基于 Scene Graph,一个 OpenGL(ES)2.0 抽象层,对绘图进行了高度优化,效率更高。
全新的 QML 引擎
Qt 4.x 中,QML 引擎基于JSC(JavaScriptCore - Webkit 的 JS 引擎)。
Qt 5.0 中引入 V8(Google 的开源高性能 JavaScript 引擎,用 C++ 编写,用于 Chromium、Node.js 和多个其他嵌入应用程序)。
Qt 5.2 中引入了 V4 JS 引擎,针对 QML 用例进行了优化,并且可以选择关闭 JIT(Just-In-Time)编译,以符合 iOS 和 WinRT 平台的限制。个头更小、反应更快、扩展性也非常好。
从 Qt 5.5 开始,加入了一个新模块 QtQuick3D,它提供使用 QML 语言创建 3D 应用程序/游戏的能力,其使用的是一个被命名为 FrameGraph 的新引擎,而非 Scene Graph(因为太 2D/2.4D)。
模块、属性和方法、类型和 API、C++ 代码(QtDeclarative 被移除了,替代的它是Qt QML 和 Qt Quick 模块)、QML 插件的更改。

3.为什么要引入 QML/Qt Quick?

在我看来,主要归结为以下几点:
战略性发展
Qt 想用 QML/Qt Quick 一统天下(桌面 + 移动端)。梦想还是要有的,万一实现了呢?
众所周知,Qt 为跨平台而生,而 QML/Qt Quick 作为 Qt 新生力量,完完全全继承了 Qt 包罗万象的特点,它的诞生为 Qt 进军移动领域迈出了历史性的一步。
随着 Qt 的不断迭代,QML/Qt Quick 也可用于开发传统的桌面程序,而且效率越来越高,这样以来,便可以用 QML/Qt Quick 做任何你想做的事情。
QML/QtQuick 作为 Qt 的绝对核心,特别是对于界面要求较高的开发者来说,其作用更为重要。
开发效率的提升
传统上的 native UI 开发普遍使用 C++、C#、Objective-C 等语言。但近年来,本地应用使用 HTML5 + JS 也成为了一种趋势。一方面硬件资源越来越丰富,另一方面 Web 技术让 JS 的解析速度更快。
除此之外,其中一部分功劳要归功于 Google,由于其开源了其 NB 的 JS 引擎,Node.js 加上一个前端框架也可以开发本地应用了。例如:Electron - 构建跨平台的桌面应用程序。
QML/Qt Quick 和 Node.js 类似,也提供了一系列 JS 和 C++ 交互的接口,便于 JS 和 C++ 通信。
UI 与逻辑分离
尽管对于大多数情况而言,在编写应用程序时只需 QML 和 JavaScript,但在有些情况下需要计算密集型任务(例如:复杂图像处理、物理引擎),并且将需要处理器竭力提供所有可用性能。
在这些情况下,QML 应用开发适合使用 C++ 来进行扩展,以便在后台执行资源密集型任务,而界面设计和一些简单逻辑(例如:按钮变色、换肤、变形等)都可以在 JS 中完成。这样避免了传统应用开发前端设计和后台逻辑混合的情况,让界面设计者专心设计界面成为了可能。
由于 QML 是在 Qt 上构建的,因此其继承了 Qt 框架中的大部分功能,尤其是信号和槽机制以及元对象系统。使用 C++ 创建的数据可从 QML 直接访问,而QML 对象也可从 C++ 代码进行访问。

4.Qt Widgets VS QML/Qt Quick

Qt 4.7 发布时,引入了 QML,用于移动开发,其全面支持触摸操作、流畅的动画效果等。但在 Qt 5 中,QML 已经不再局限于移动开发,也可用于开发传统的桌面程序。
很长时间里,我都在使用 Qt Widgets。当第一次尝试 QML 时,发现它太原始。但随着 Qt 5 的持续更新,QML 已经大大改善 - 添加了更多的功能、更好的性能以及更多的平台支持。话虽如此,但 QML/Qt Quick 仍在发展,随着版本的更新,也会变得越来越成熟。
相比之下,Qt Widgets 更“老”、更成熟,而 QML/Qt Quick 则更“新”、更“现代”。
无论如何,Qt Widgets 和 QML/Qt Quick 都可以在多个平台上使用(Windows、Linux、OS X…)。
对于传统的桌面程序来说,优先考虑使用 Qt Widgets,若要开发更“现代”的 UI 与高级应用,建议使用 Qt5.x + QML 2.x + QtQuick 2.x。
对于移动端开发来说,建议使用 QML,协同 JavaScript,简单快捷、渲染效果更佳、界面更炫酷。不建议使用 Qt Widgets,其显示效果、适应性都不好。

方式一:使用QQuickView

先看所有代码

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述
效果展示
在这里插入图片描述

注意点:

  1. 如果是用 QQuickView或者QQuickWidget 加载的qml,root节点不能是 Window 这一类类型,最好是Rectangle,使用Window这一类型将不能正确加载.qml文件(如果qml文件是以 Window 作为根元素的话,QQuickView加载时会出现一个警告,因为QQuickView继承自QQuickWindow(又继承自QWindow),它本身就是一个窗口类,如果再用 QML 的 Window 控件作为根元素,自然会出现警告,可以忽略掉该警告,也可以将 Window 改成 Item (但要注意,Window 的有些属性在 Item 中不存在),这样就不会出现警告了)
    2.view->setResizeMode(QQuickView::SizeRootObjectToView); //设置了根对象大小随窗口大小改变而改变。这样就能动态缩放qml内容在这里插入图片描述

使用QQuickWidget

直接在ui中添加

大前提:在这里插入图片描述
这里是引用在这里插入图片描述
结果显示:在这里插入图片描述

代码添加

这里是引用在这里插入图片描述
结果显示:在这里插入图片描述
注意:QUrl 他自己会带一个路径,就是编译路径下,如果不创建qrc,放在此资源下,路径就要要写这个路径(编译结果路径)的相对路径


http://chatgpt.dhexx.cn/article/jjIwfPsJ.shtml

相关文章

ubuntu20.04编译安装qt5.14.2和qtcreator4.12.0

编译qt5.14.2 本来编译安装的是qt5.15.2,编译安装ok,一切就绪,安装qtcreator安装后一直报错,“以下插件有错误,无法载入:QmlDesigner QmlProfiler ,插件初始化失败:cannot Create…

cocos2d-js 手游解密jsc和http数据aes加密解密分析①

分析流程 1.查看游戏引擎类型 2.安装游戏 3.抓包分析 4.ida分析so文件 5.获取密钥解密 6.分析解密后源码 7.验证分析结果 解密工具:jsc解密1.44.zip-其它文档类资源-CSDN下载cocos-jsc解密加密程序,需知道key,这些可以通过ida或Frida获取,支持最新更多下载资源、学习…

js 加密 为jsc

从Cocos2D-X v2.1.4版本开始,增加了Cocos2D-console命令行工具,该工具的其中一个功能是:把.js文件转换为.jsc文件,该文件是字节码格式,可以提高代码的安全性。 使用这个工具的方式很简单。以引擎自带的TestJavaScript项…

android cocoscreator jsc js 间加解密(六)

前言 前面 学了 aandroid cocoscreator 热更新 超详细篇(五) 这章 主要学习 cocoscreator 构建后 jsc 与js 文件 之间相互转化(加解密)并实际测试. 可以配置cocoscreator热更新使用 1: 准备 win7 64位 cocoscreator2.0.10 &#…

jsc反编译以及二进制修改

参考:https://www.52pojie.cn/thread-814217-1-1.html 最近碰到jsc的游戏,游戏中有跳过功能但有限制,想着对游戏进行修改达到无条件跳过。 首先,反编译jsc文件,使用这个工具https://github.com/irelance/jsc-decompile…

jsc反编译工具编写探索之路

对于经常做游戏安全逆向的读者来说,可能会经常遇到Cocos2dx编写的游戏。这个国产开源的游戏开发引擎支持多种编程语言进行游戏开发:发括主流的C/C/JavaScript/Lua,之前,与大家讨论的Lua软件安全系列的文章,讨论的是采用…

vue.jsc初体验

Vue 1.安装脚手架 (1)npm install -g vue-cli (2)Vue -v //查看是否安装成功 (3)Vue init webpack name(名称) (4)Npm install (5) (6)Npm install (7)Npm run dev 2.用vue构建项目笔记3(引入jquery和bootstrap) 其实用了vue以后,并不建议再去用jquery. vue是视图…

jsc转js工具使用方法

近日难得手闲写了这个小工具,发上来让大家参考参考。之前没有写详细使用说明,这里补一下 进到工具的文件夹下,直接执行exe可以看到要什么参数 这个新弹出的窗口可以直接关闭,这个只是让你看它需要什么参数的 2.所以如果你要解密…

Day07Spark多语言开发

Spark多语言开发 学习目标 1.掌握使用Java语言开发Spark程序 2.了解线性回归算法案例 3.了解使用Python语言开发Spark程序 4.了解决策树分类算法案例 1. JavaSpark 1.1 编程语言说明 Spark 在诞生之初就提供了多种编程语言接口:Scala、Java、Python 和 SQL&#x…

cocos creator jsc 逆向解码为js

cocos creator 下的jsc cocos creator 编译之后的所生成的jsc文件,虽然后缀是jsc,但其实和js虚拟机所执行的字节码(jsc)是二个不同的东西,只是使用xxtea对js文件进行加密而已。xxtea是可逆的,所以cocos creator下的jsc是完全可逆的&#xff…

Cocos2dx-js 资源.jsc和.pkm反编译

.jsc 解密 1. 找到apk里面的libcocos2djs.so. 用编辑器utf-b模式打开 2. 搜索Cocos Game 紧接着的 220404db-d3df-4b 就是密码 3. 使用工具decrypt.exe 即可解密 下载地址:https://download.csdn.net/download/liutietuo/86511410 cocos creator script decrypt version 1.0…

jsc 解码窥探

先使用 JS_DecodeScript反编译jsc 得到AST树 AST树词法解析 http://esprima.org/ AST还原成源码: npm install escodegen AST树遍历:npm install estraverse https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey/Internals/Byte…

cocos2d-js中jsc逆向为js

1.mac系统 2.安装php7以上的版本 ubuntu $ sudo apt install php7.0 mac $ brew install php7.0 windows just google an binary one 查看php安装的版本这里mac电脑为例子: 输入:php -v 只要7以上的版本即可 3.cd到自己的项目位置 cd path/to/project 安装composer,…

如何设置input默认值

之前聊过input最大字数限制&#xff0c;今天看下如何设置输入框默认值 placeholder属性 如下&#xff1a; <input type"text" maxlength"11" placeholder"名字"/> 输入框展示效果如下&#xff1a;

input标签点击移除默认值

使用onfocus事件检查当前输入框内的值,如果是默认得值,就将value属性置空. <input type"text" value"请输入内容" onfocus"javascript:if(this.value请输入内容)this.value;"> 操作之前: 操作之后:

Python input输入超时选择默认值自动跳过

Python input输入超时选择默认值自动跳过 Python input 等待键盘输入&#xff0c;超时选择默认值&#xff0c;释放input&#xff0c;之后重新进入等待键盘输入状态&#xff0c;直到用户输入可用数据。 一、调用 func_timeout 模块实现超时控制 1、安装 func_timeout 库 pip…

html文本框设置默认值,HTML input文本框设置和移除默认值

这里想实现的效果是&#xff1a;设置和移除文本框默认值&#xff0c;如下图鼠标放到文本框中的时候&#xff0c;灰字消失。 1.可以用简单的方式&#xff0c;就是给input文本框加上onfocus属性&#xff0c;如下代码&#xff1a; οnfοcusif(this.value"请输入关键字进行搜…

使用js代码修改input的默认值

内容&#xff1a;使用js代码来对input设置的默认值进行修改&#xff0c;点击按钮修改input的默认值 代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><scrip…

html设置input默认值,使用jQuery给input标签设置默认值

由于项目需求&#xff0c;简单地写了一个input默认值设置&#xff0c;实现给.form中所有的input设置默认值的方法。input默认值设置 $(function() { //集体调用 $(".form input").each(function(){ $(this).setDefauleValue(); }); //单个调用 $("#key").s…

antd 给input设置值_Antd 中 Input 组件默认值的显示

1、input标签中有placeholder可以显示默认值 但是有少量样式的问题(字体颜色会淡一点) placeholder属性 2、用Input组件中的defaultValue属性 defaultValue属性 3、form表单组件中的initialValue参数 注意&#xff1a;当Form组件和Input组件一起用时&#xff0c;defaultValue在…