QML
文章平均质量分 58
luoyayun361
不积跬步无以至千里
展开
-
QML自定义模块及qmldir的使用
在开发QtQuick项目中,当项目文件很多的情况下,可能会分成多级文件夹来进行分类,还有一些通用类型文件,如公共组件,通用配置等等,需要在各个不同的文件中进行调用,这种情况下,一种方式是在当前需要引用的文件中通过关键字import加上相对路径,从而找到通用文件目录。另一种方式就是将通用文件目录设置成qml模块形式,通过import直接引入模块名称就可以直接调用相关qml了,这样的好处是在任何不同的目录中都可以随处导入模块,而不用考虑相对路径的问题。原创 2023-04-16 13:44:52 · 1213 阅读 · 1 评论 -
qml 类似移动端时间设置控件
qml实现一个类似手机端闹钟或其它时间设置控件。可以用ListView实现其效果,但是QML提供有现成的控件可以用,所以要实现这个效果更方便。先看效果图本文Demo下载。原创 2023-01-07 13:01:20 · 1320 阅读 · 0 评论 -
QML + KDDockWidget 实现 tabwidget效果( 窗口可独立浮动和缩放)
前面文章介绍过在QML中使用ListView实现TabBar标签拖拽交换位置效果(文章在这里)先在此基础上升级一下,结合KDDockWidget做一个可浮动的窗口效果。关于KDDockWidget的介绍,以前的文章有写过,可参考:qml dockwidget窗口停靠KDDockWidgets源码编译及安装KDDockWidget是第三方开源项目,可以用于实现QML中Dock窗口效果,Qt本身不支持QML的Dock效果,所以正好弥补这部分空缺。而KDDockWidget中其实是支持Tab合并效果,但是在实原创 2022-12-05 18:31:52 · 2021 阅读 · 0 评论 -
QML ListView实现TabBar标签拖拽交换位置效果
QML中TabBar要实现标签移动效果比较麻烦,不像QTabBar控件那样可以设置属性后就能移动,虽然在父类Container中提供了moveItem接口,但是要实现拖拽交换的视觉效果还是没那么容易。本demo使用QML的ListView来实现该功能,并动态切换对应的page内容。demo提供了动态添加页、删除页、移动交换标签位置功能。1.点击顶部“Add Panel”按钮,可以动态添加tab标签及对应的页面,名称相对应;2.按住标签左右拖拽可交换标签位置;原创 2022-11-25 16:30:39 · 1123 阅读 · 1 评论 -
QML Shape实现任意圆角Rectangle矩形
QML中有时候需要实现一些特殊定制化页面,比如不同的圆角矩形,如果直接用Rectangle控件定义radius圆角属性,会将四个角统一设置成一样的圆角,但是如果仅仅只想实现两个圆角效果,另外两个直角,或者圆角的弧度不同,这时候就不能直接用现有的Rectangle去做了,有两种方法, 一种是直接用Canvas进行绘制,一种是通过Shape组件来实现。两种方法均可,区别是前者稍微复杂一点,代码量会多一些,后者相对简单点,而且便于封装,多处使用。原创 2022-10-22 17:37:01 · 2386 阅读 · 0 评论 -
QML ListView model动态切换
应粉丝的请求,想做一个列表控件,点击item的时候右侧列表项动态切换,效果如下:他的设想是点击左边列表item的时候右边切换页面,这样做其实也可以,但是没必要搞这么复杂,直接就用两个列表来实现就可以了, 右边列表动态切换model就可以更新数据。抽半小时实现了一个简单样式。经常会收到一些粉丝的私信,我会尽量回复,有空的情况下可以帮忙一起解决问题,相互学习。...原创 2022-08-05 15:56:56 · 1201 阅读 · 1 评论 -
最简单的方式实现QML无边框窗口边缘拖动调整大小
前言使用Qt在开发桌面程序时,通常会去除默认的程序边框,从而实现自定义的标题栏。然而当设置窗口属性为Qt.FramelessWindowHint后,窗口的拖动,以及在边缘拖动缩放的功能就没有了,在以前的Qt版本中,就需要自己写很多繁琐代码来实现这些功能,尽管Qt为此也提供了一个类 QSizeGrip,但是它仅仅只能在窗口角落进行调整,在窗口上下左右边缘是不行的。庆幸的是,在Qt5.15中官方在QWindow中提供了两个新的方法:startSystemMove和startSystemResize。这些方法原创 2022-02-11 18:03:44 · 5676 阅读 · 10 评论 -
QML TableView表格使用示例
前言QML中实现表格可以使用多种方式,比如直接使用ListView,定义每一行delegate,或者自定义Rectangle,放到Flipable中组合使用。Qt Quick Control1中 从5.1版本开始就提供了表格控件,但是感觉不怎么好用,在Qt Quick Control2中 5.12版本开始又提供了一个专门用于做表格的控件TableView,相比于前面的方案,使用Tableview更加简单和直接。那么,接下来就看看Quick Control2 的TableView使用方法。正文我们直接针原创 2022-01-07 13:11:07 · 12477 阅读 · 9 评论 -
qml 捕捉Alt+F4实现弹窗退出
前言总所周知,Alt+F4是系统快捷键,可以直接强制关闭当前活动的应用程序,那么,如果我们的程序退出的时候有弹窗确认,而系统在捕获到Alt+F4快捷键也需要弹窗确认该怎么做呢,今天来解决这个问题。正文首先,我们知道Alt+F4快捷键是可以直接关闭应用程序,在Qt应用中,如果要在响应该快捷键的时候在应用程序中弹窗,有两种思路,一种是直接抓取该快捷键,一种是直接响应快捷键后的关闭函数。如果是QWidget项目,抓取Alt+F4快捷键,有两种方式:响应nativeEvent事件去捕获,另一种是通过wind原创 2021-11-15 18:30:00 · 939 阅读 · 0 评论 -
qml dockwidget窗口停靠
前言前面一篇文章介绍了KDDockWidgets的使用(文章在这里),其实主要目的就是为了用KDDockWidgets提供的Qt quick 下的窗口停靠功能。Qt原生部并没有提供Qt quick的dockwidget,也不知道为啥。其实窗口停靠功能其实是非常常见的,但是Qt只支持QWidget的。KDDockWidgets刚好可以解决这个问题,详细介绍在之前的文章已经介绍过了,其功能比QDockWidget更加丰富。那么,今天就来看一下如何用KDDockWidgets做自己的在qml 下的窗口停靠功原创 2021-06-10 10:28:21 · 3436 阅读 · 9 评论 -
Qt 6的Qt 3D会是什么样?
翻译自What about Qt 3D in Qt 6?原文作者:Sean Harmer在Qt 6中,我们希望可以在很多方面对Qt 3D进行改进,本文将着重介绍几个主要方向:渲染器工作缓存和现代图形API的支持,如Vulkan、Metal和DirectX 12。渲染器缓存Qt 3D的运行是基于两种现有的数据结构:Scene Graph-描述场景的内容;Frame Graph-描述渲染...转载 2020-02-27 08:03:05 · 2937 阅读 · 0 评论 -
Qt 3D的未来展望
原文作者:Sean Harmer翻译:Richard Lin如您所知,Qt推出了名为Qt Quick 3D的全新模块,它基于QML API为Qt Quick增加了3D绘图能力(预计在Qt 6提供C++ API)。这对Qt 3D有什么影响,未来在Qt世界中它又该如何定位呢?希望本文以及后续文章可以解答这一问题,同时能深入介绍我们对Qt 3D正在进行的改进。本文将聚焦在Qt 5.x中即将发布的...转载 2020-02-26 19:54:28 · 1470 阅读 · 1 评论 -
如何将Felgo程序部署到Android中
概述经过前面两篇文章的描述,我们知道了Felgo的大致应用,Felgo支持跨平台 windows、macos、Linux以及移动平台Android、IOS、Windows Phone和Windows Runtime的本地开发和部署,那么本篇栏看一下如何将Felgo应用程序部署到Android移动设备中。在上一篇文章【在这里】中介绍了安装Felgo的步骤,按照那种安装方式,装完过后默认只有win...原创 2019-12-21 15:49:01 · 1742 阅读 · 0 评论 -
Felgo之初体验--安装与运行
前言上一篇文章中介绍了Felgo的用途,大致知道了Felgo可以用来干些什么,在本篇中我们介绍下Felgo的安装,以及创建我们的第一个Felgo程序。软件下载首先我们在官网下载相应平台的安装包,下载地址在这里。如下:注意,在下载的时候会提示要先登录才行,可以使用Github账号登录,或者重新创建一个新的账号。ok,我们选择windows版进行下载,注意,这里下载的是在线安装包,只有十几...原创 2019-12-20 20:20:33 · 4063 阅读 · 8 评论 -
QML on Android 在小米5s手机上中文字体显示异常
前言随着Qt版本的不断升级,用QML开发Android移动端应用越来越方便,并且支持的功能也逐渐增多,不过由于Android机型实在太多,并且大部分Android系统都是由手机厂商深度定制过,然后在兼容性上还是难免会有一些问题。今天要说的就是其中之一,我用QML开发android应用时,编译出来的安装包在大部分手机上都是能正常使用的,但是在小米5s手机上却中文显示异常,字体中空,另外,在一加手机上显原创 2017-04-15 15:30:04 · 2350 阅读 · 5 评论 -
QML ListView几个常用且非常重要的属性
前言用 QML 开发界面的好处想必就不用多说了吧,可以总结为一个字:爽。的确如此,用 QML 可以快速的开发出一些非常酷炫和复杂的界面,并且代码还非常简洁,可读性很强,容易理解。今天要总结的是关于 ListView 中的一些常用的属性,非常实用,不过如果是刚接触 ListView 的话,可能会有些陌生(本人刚开始用的时候也是,然后翻遍了 Qt 帮助文档),所以这里汇总一些最常用的属性并介绍其...原创 2018-10-27 23:28:01 · 29194 阅读 · 11 评论 -
Qt for ios / Qt for Android 设置透明状态栏
前言原创 2018-11-22 23:05:12 · 1109 阅读 · 0 评论 -
QML和C ++之间的数据类型转换---枚举
前言众所周知,如果要在 QML使用 C++中定义的类型,有些数据类型是是可以直接使用的,如常见的 int,但是还有一些相对特殊的类型就需要做些特定的操作才可以使用了,那么,这里来看一下如何在 QML 中使用 C++中定义的枚举类型。正文1要将自定义枚举用作数据类型,必须注册其类,并且还必须使用Q_ENUM()声明枚举,以将其注册到Qt的元对象系统。话不多说,直接上代码:首先我们定义一个...原创 2019-01-06 13:00:42 · 1898 阅读 · 0 评论 -
QML 基本类型
前言QML 有许多基本类型,例如整型int或字符串类型string,这和 QML 对象类型形成对比,QML 对象类型是指具有属性、信号、方法等的对象,与对象类型不同的是,基本类型不能用于声明 QML 对象,例如不能声明 int{}对象或size{}对象。基本类型可用于定义:单个值(例如,int 表示单个数字,var 可以指单个项目列表)包含一组简单的属性值对(例如size 包含 wid...原创 2019-01-08 08:07:34 · 3352 阅读 · 1 评论 -
QML类型系统
前言前一篇文章已经介绍了 QML 的基本类型,这里来介绍 QML 类型系统,包含了所有的在 QML 中可使用的类型。可以再 QML 中使用的类型包含以下几种:由 QML 语言提供的基本类型从 C++中注册成 QML 可用的类型由 QML 模块提供的类型无论类型定义来自何处,引擎都将对属性和这些类型的实例强制执行类型安全检查。基本类型QML 语言内置支持各种基本类型,包含整型,浮...原创 2019-01-09 07:08:20 · 567 阅读 · 1 评论 -
QML UI 与逻辑分开
前言大多数开发者都希望创建一个可维护的应用程序,要达到该目的的方法之一就是将用户界面与业务逻辑分开,应用程序的 UI 应该用 QML 编写的几个原因如下:声明性语言非常适合定义 UIQML 代码编写很简单,因为它比 C++更简洁,并且不是强类型的。这也是使他成为原型的优秀语言。JavaScript 可以很容易地在 QML 中用于响应事件。作为一种强类型语言,C++最适合做应用程序的逻...原创 2019-01-09 07:39:02 · 3653 阅读 · 4 评论 -
QML 性能优化建议(一)
考虑时间因素开发程序时,必须尽可能实现一致的60帧/秒刷新率。600帧/秒意味着每帧之间大约有16毫秒可以进行处理,其中包括将绘图基元上传到图形硬件所需的处理。那么,就需要注意以下几个重要的点:1.尽可能使用异步,事件驱动编程2.使用工作线程进行重要处理3.永远不要手动控制事件循环4.在阻塞函数中,每帧的花费不要超过几毫秒如果不这样做,那么将会发生调整,影响用户体验。注意:永远...原创 2019-01-15 22:10:03 · 3333 阅读 · 0 评论 -
Qt 5.12 LTS(长期维护版本)中Qt Quick的性能改进
我们一直致力于提高Qt的性能和优化其内存消耗。Qt 5.12的一个重点关注是在于减少QML引擎的内存消耗和优化JavaScript性能。与上一个长期支持版Qt 5.6 LTS相比,Qt 5.9 LTS总体性能已经发生了明显改善。这都在一篇博客中进行了总结,它在64-bit ARM基础上分析了Qt 5.9 LTS版本中的Qt Quick 性能提升。在Qt 5.12 LTS中,我们更深入研究了QML...转载 2019-01-16 08:14:12 · 7686 阅读 · 1 评论 -
QML 性能优化建议(二)
前言接前一篇文章,QML 性能优化建议(一),这里接着来介绍性能优化建议的第二部分:通用接口元素,在这里会介绍一些常见的元素,如:图片、布局之类的写法。通用接口元素图片图片是任何用户界面的重要组成部分,但是由于加载图片所花费的时间以及内存占用问题,将会是影响性能的一个很大的因素。异步加载如果加载的图片非常大,那么在加载的时候要保证不会阻止UI线程。可以将QML Image元素的“异步”...原创 2019-02-03 09:14:43 · 2442 阅读 · 0 评论 -
Qt C++中 Map 和 List 转换到 QML 中使用
前言C++中的 list 和 map 使用非常方便, 对应到 Qt 中的类型为 QList 和 QMap,在和 QML 交互的时候,可能也想用到这两个类型,或者说将 C++中的参数和 QML 中的参数进行相互转换使用,在 QML 中用到的是 JavaScript 语法,那么,今天来看一下如何在 C++和 QML 之前来对这两个类型进行相互转换使用。正文先明确一点,要在 C++和 QML 中使...原创 2019-02-04 10:14:41 · 4070 阅读 · 0 评论 -
Qt C++发送图片到QML显示
前言开发Qt应用时,想把QImage发送到QML端通过Image组件显示出来,这种场景主要用在例如在C++端调用android系统接口截图然后发送到QML端显示,或者C++端QWidget截图然后让QML界面中显示。要想实现该功能,需要用到一个重要的类QQuickImageProvider,这是专门从C++端提供图片到QML显示的。正文先来看看Qt的示例首先定义一个类并继承...原创 2017-03-13 23:01:13 · 7973 阅读 · 13 评论 -
Qt QML 实现Android相册展示
概述用QML来做一个Android手机上的相册浏览软件,支持相册列表展示,相册中相片列表展示,以及点击相片过后可以进行浏览。类似于android手机的相册功能,还支持在浏览大图时进行两指缩放,左右切换浏览。正文本示例主要为了提供一个思路,使用Qt进行相片展示。目前代码还在完善中,还处于一个粗糙的demo,就不进行代码展示了。先来看一下实际的效果:打开软件后直接是相册列表展示:点击某...原创 2019-05-12 14:39:00 · 2026 阅读 · 5 评论 -
QML for Android 加载图片资源的几种方式
前言前段时间用 QML 做一个简单的 android 程序,需要打开 android手机本地图片,原本是一个非常简单的功能,但是碰到一些坑着实的被坑了一把,然而在网上并没有找到相关的文档,这里做个总结,今后遇到同样问题的人可以绕开这个坑。正文先来还原一下当时遇到的情况,用 QML 写一个 android 程序,需要打开android 本地的图片,图片格式为 PNG,OK,目测是一个很简单的功...原创 2018-10-21 17:04:26 · 1564 阅读 · 2 评论 -
JavaScript判断字符串中包含另一个字符串(QML 中使用)
前言为啥会搞JavaScript呢,原因很简单,因为 QML 中用到了 JS 的语法,本来在 Qt 里面 QString 检查字符串是否包含一个子串是非常简单的事情,直接用contains()函数就可以搞定了,但是一到了 QML 中进行相同的判断就懵逼了,还好知道这家伙是用了 JS 的语法,所以果断搜了一堆资料进行一番总结,以免今后遇到同样问题时又是一脸懵逼。正文其实 JS 中有很多种方式做...原创 2018-10-18 22:15:13 · 3031 阅读 · 0 评论 -
QML ListView实现树形二级列表(类似 android ExpandableListView控件)
前言QML 中没有直接提供类似 android 的ExpandableListView二级列表控件,treeView,但是用 treeView 实在是有些不方便,并且达不到想要的效果,所以干脆用 ListView 来扩展一个,这其中也参考了网上一些用法,大致思路差不多,这里做一下总结。效果图每一级可随意展开或收起。实现实现该效果主要有如下几个关键点:model ...原创 2018-08-11 16:15:20 · 7404 阅读 · 16 评论 -
QML 发光呼吸动画字体
前言用 QML 来实现一个呼吸动画效果的字体,非常酷炫,主要使用 Glow 组件来实现,然后通过控制透明度的改变来实现想要的效果,代码非常简单。正文先来看看效果 源码:Item { Rectangle { anchors.fill: parent color: "black" } Text { id: text a原创 2017-08-13 13:20:24 · 2990 阅读 · 2 评论 -
QWidget中加载QML页面并设置透明背景
要在QWidget中加载QML页面首先要用到一个很重要的类QQuickWidget示例:m_pQuickWidget = new QQuickWidget(this); m_pQuickWidget->setFixedSize(1131,586); m_pQuickWidget->setAttribute(Qt::WA_AlwaysStackOnTop); m_pQuickW原创 2017-06-25 13:39:18 · 4899 阅读 · 0 评论 -
Qt 加载QML 文件的几种方式
前言之所以写这篇文章,是因为在项目中经常会碰到一个问题,qml 文件该如何加载到工程中,其实 Qt Quick APP 有两种模式,另外,还有一种场景是,在 QWidget 界面上加载 QML 页面,这三种情况的使用方式都不太一样,这里总结一下。正文QQmlApplicationEngined搭配 Window示例:#include <QGuiApplication>#include <QQmlA原创 2017-08-12 12:02:43 · 14407 阅读 · 6 评论 -
QML Camera 摄像头拍照(带滑动条设置焦距)
额…什么都不说了,直接看代码吧Item{ id:item anchors.fill: parent Camera { id: camera focus { focusMode: Camera.FocusAuto; focusPointMode原创 2017-07-23 12:23:07 · 2236 阅读 · 0 评论 -
QML中类似QMap的用法
示例:property var delegateComponentMap: { "ItemDelegate": itemDelegateComponent, "SwipeDelegate": swipeDelegateComponent, "CheckDelegate": checkDelegateComponent, "RadioDelegat原创 2017-06-25 13:34:59 · 4224 阅读 · 2 评论 -
QML ListView悬浮标题栏
前言随着Qt版本的不断升级,现在用QML做移动开发越来越方便,并且代码也非常简洁容易理解,Android原生开发中的材料设计界面很普遍,很多软件都是走这个风格设计,并且随着Android开发很多开源代码不断的共享,使得用原生开发Android程序变得越来越简单并且还越来越漂亮,而QML中其实也有,只是没那么成熟,并且风格也没有Android原生开发的那么漂亮。正文今天要做的是关于QML的ListVi原创 2017-05-21 15:53:45 · 4558 阅读 · 0 评论 -
QML做渐变色字体
前言渐变色字体就不多说了,在开发应用中用得很多,之前用LinearGradient来实现,但是一直效果不太理想,在桌面端运行时没有问题,但是在android上表现不一样。后来查看官方文档,找到一种比较好的方法,分享一下。正文这里用到的是ShaderEffect类,来看看效果 来看源代码Item{ width: 200 height: 100 Rectangle {原创 2017-04-09 09:01:13 · 2707 阅读 · 0 评论 -
QML做类似Android圆形头像
前言在移动端应用中,用户头像一般都是圆形的, 在Android开发中github上有专门生成圆形图片的库可以使用,传入一张正常照片就可以返回圆形图片,并用户头像设置。那么在QML中也可以实现相同的效果,并且使用非常简单。需要用到OpacityMask组件,在Qt官方文档中已经非常详细的介绍了该组件的使用,那么接下来我们看看如何做一张圆形的图片出来。正文先看看效果图,左边是原图,右边是处理后的。 废原创 2017-04-09 08:36:11 · 1255 阅读 · 0 评论 -
Qt/QML 窗口阴影边框实现
前言在Qt界面开发中,很多时候为了UI的整体美观,都会在窗体添加阴影边框,这样会让整个窗体更加漂亮,用户体验会更好,那么,接下来介绍几种在项目中常用的添加阴影边框的方式,其中包括QWidget和QML两个体系的实现方法。而QGraphics体系的阴影边框实现和QWidget是一样的, 可以通用。正文一,QWidget实现阴影边框QWidget实现阴影边框有几种常用的方式,如下:1.设置带阴影边框的背原创 2017-03-23 07:47:18 · 18735 阅读 · 0 评论 -
Qt Scene graph画线
前言想要实现在QML中画线,有几种方式: 第一种,用在QML中用Canvas来实现画线功能,经过实践,效率比较低,折线非常严重,特别是在Android手机上运行。 第二种,通过QPainter来绘制,在C++中继承QQuickItem,然后实现paintEvent事件去绘图,然后在QML中显示绘图层,该方式在桌面端应用效果勉强能接受,但是在Android端效果也很差。 第三种方式就是通过Sce原创 2017-03-10 10:56:37 · 3040 阅读 · 0 评论