QML
文章平均质量分 56
喵喵叫的猴
只争朝夕,不负韶华
展开
-
QML自定义ComboBox组件,支持动态筛选
QtQuick.Controls提供了ComboBox组件,该组件能够满足日常的下拉选择框的需求,但当需要用户在ComboBox中通过输入关键字进行自动匹配时,原生的组件虽然提供了editable属性用于输入关键字,但是匹配内容不弹出下拉框,无法动态筛选。原创 2024-02-01 15:48:36 · 1251 阅读 · 0 评论 -
QML动态创建的组件添加自定义属性
当使用Qt.createComponent()时,我们可以在组件qml组件文件里添加属性值,但是如果该qml组件被复用到很多地方,我们又不想在组件文件中添加很多自定义属性时,可以在该组件createObject()后对组件实例单独添加属性。原创 2024-01-18 09:52:01 · 834 阅读 · 0 评论 -
QML无边框最大化窗口时遮住了任务栏,程序默认置顶的问题
在QML窗口使用无边框,并且默认程序最大化显示后,此时程序显示默认自动变成了全屏显示,程序自动遮挡住了系统任务栏。当使用多屏幕显示时,切换不同程序,程序的界面显示错误,使用录屏软件录屏无效等莫名其妙的错误原创 2023-04-20 13:52:10 · 994 阅读 · 1 评论 -
QML地图绘制虚线
QML提供了MapPolyline用于在地图上绘制线段,该线段是实线,因此我使用Canvas自定义绘制的方式在地图上绘制线段, 鼠标在地图上点击后,在点击位置添加图标 ,当有多个图标被添加到地图上后,计算各个图标间的距离,并创建一个新的虚线线段组件,连接两个图标点,显示距离数值。原创 2023-04-19 17:18:41 · 1796 阅读 · 0 评论 -
QML地图Map中使用QPainterPath,并显示任意点经纬度位置
QML地图Map中提供了供绘制图形的组件,例如MapPolyline,MapCircle等,但是这些组件在绘制复杂轨迹时就显得功能不够全面,因此我们将QPainterPath在Map中进行使用并进行绘制,并使用C++和Qml中的函数进行相互调用计算获取点屏幕坐标和经纬度坐标。例子中使用了QPainterPath的QPainterPath::pointAtPercent获取绘制的轨迹全过程中的各个位置的经纬度。原创 2022-11-17 21:49:10 · 3266 阅读 · 0 评论 -
QML自定义的日历控件
QML中提供了日历的控件,该文主要记录对日历控件的样式设置。原创 2022-08-31 14:05:45 · 2024 阅读 · 0 评论 -
QML实现双屏显示
QML程序中需要分别在主屏幕和分屏幕上显示不同的界面内容,但又为了不同界面间能够进行数据交互,因此使用如下方法实现双屏显示,即由主窗口生成第二个窗口,将该窗口移动到第二个屏幕上,实现方法很简单.........原创 2022-08-25 20:17:55 · 2365 阅读 · 1 评论 -
QML 可拖拽边框和顶点调整大小组件(新增对主窗口支持)
QML项目开发过程中,有时候需要对控件大小和位置‘进行人为调整,因此设计该组件。该组件鼠标置于边框和顶点位置时鼠标样式对应改变,拖动边框可修改该方向组件大小,拖动顶点可修改组件处横纵向组件大小。同时新增了对主窗体的拖拽支持。原创 2022-03-14 13:19:30 · 4734 阅读 · 4 评论 -
QML 地图可拖拽位置标签组件
在地图上显示位置信息时,有时候需要同时显示该位置的详细信息。该组件可在地图上显示一个连接到地图地理位置的标签框,该标签框可点击进行拖拽。在地理位置改变、地图缩放、地图平移时,该标签框的相对位置保持不变。原创 2022-03-01 13:11:55 · 1163 阅读 · 0 评论 -
QML 地图修改插件源码(四),Map根据目录作为索引加载地图瓦片
对地图瓦片目录进行分层,按照存放路径作为索引,即每个地图层的瓦片存放入一个文件夹中,插件根据地图类型和缩放比例进行查找,这样能大大的提高效率。该示例中只是按照地图层数分文件夹,如果更追求效率可按照我的方法在每一个层内再经行细分。示例中的mapType为自定义的地图类型(链接),如不需要在插件中设置地图类型,删除示例中的mapType相关部分即可原创 2022-01-27 12:57:08 · 2205 阅读 · 0 评论 -
QML 地图修改插件源码(三),Map在Plugin中设置加载地图类型
常用的地图种类分为交通图,地形图,卫星图等等,在QML的Map(以OSM地图为例)中提供activeMapType属性用于读取当前显示的地图类型(注意:该属性为只读属性,不能用于赋值),QML中地图的加载寻找根据瓦片的文件名进行查找,例如名为"osm_100-l-5-2-2-3.png"的瓦片,其中5代表了该地图的类型原创 2022-01-27 12:47:06 · 2484 阅读 · 0 评论 -
Qt QML 自绘GPS方位校北仪控件
该控件使用QQuickPaintedItem进行绘制后在QML中进行使用,相关部分参数已提供设置接口供QML中调用,如果该控件需要在QWidget中使用,将QQuickPaintedItem修改为QWidget即可。在Demo中演示了如何添加不同方位夹角,不同颜色的指针,并根据指针名称动态修改数据。控件提供的相关接口如下,如果有其他接口需求,可下方留言提供建议,本人不断完善。原创 2022-01-15 10:10:58 · 1134 阅读 · 7 评论 -
QML中使用QPen设置组件边框(以CandlestickSeries为例)
QML中提供了很多组件是由C++中绘制而注册到QML中使用的,这些组件采用QPen绘制组件边框,这样的组件均可使用返回QPen的方法设置边框样式。例如CandlestickSeries就提供了数据展示的蜡烛图,查看CandlestickSeries的文档,文档中未提供设置组件边框颜色样式的属性。由于该组件为QCandlestickSeries注册而来,因此查看QCandlestickSeries源码,发现注册有属性pen可以设置组件边框样式原创 2022-01-11 13:04:52 · 1115 阅读 · 0 评论 -
Qt Creator 无法编辑Qml界面,报错:“Qt Quick emulation layer crashed”
Qt Creator 无法编辑Qml界面,报错:“Qt Quick emulation layer crashed”原创 2022-01-05 12:39:37 · 1824 阅读 · 0 评论 -
QML地图自定义矢量路径图组件
在MapPolyline的基础上制作了MyMapVectorLine,该控件可自定义矢量标志图片样式,并根据存入数据自动计算标志方位朝向,组件颜色和标志可动态设置原创 2021-12-30 14:52:50 · 1680 阅读 · 4 评论 -
Qml中Date日期时间的值传递
在qml中需要对日期时间值进行传递,不能直接采用赋值传递的方式,否则仅仅只传递了Date的指针,并没有对数值内容进行复制原创 2021-12-27 19:05:42 · 3092 阅读 · 0 评论 -
Qml热力甜甜圈控件(嵌套饼图)附使用Demo
嵌套甜甜圈图,每个小圈内的切片具有相同角度,每个切片采用不同颜色(热力值)代表该切片处数值的大小,该图表适用于展示具有相同周期的重复数据的密度,应用于例如连续多日的24小时各时段数据密度等场景原创 2021-12-24 18:03:12 · 987 阅读 · 0 评论 -
QML 地图修改插件源码(二)添加新的功能,并编译成dll
QML中的地图模块提供了大量的功能函数供用户使用,使用起来也很顺手,但是如果想在已经提供了功能函数基础上自己新增功能,比如Map提供了添加/删除地图中组件的函数,此时我们想新增一个直接删除当前地图上所有已存在的MapItemView的函数时,就需要修改Map的源码,在源码中新增该函数,如需要修改其他模块的源码,方法类似原创 2021-12-17 13:05:26 · 1408 阅读 · 0 评论 -
QML 控件中修改ToolTip显示的位置
在QML控件中,如果需要显示提示框,通常使用ToolTip,但是默认提示框的位置总是不符合使用习惯,使用ToolTip.toolTip即可获得当前控件提示框的实例,直接对其设置即可原创 2021-12-15 17:45:20 · 2289 阅读 · 0 评论 -
QML 地图Map中加载动态路径,使用动画显示运动轨迹
在QML地图中可以显示位置,那么如果有路径的点需要动态的显示其运动轨迹,该如何实现呢?运动点迹可以使用MapItemView加载,使用箭头表示运动的指向,相邻两个位置处的矢量偏移角度可使用Map.azimuthTo()函数计算得到。但是加载的点迹是动态的,因此需要再给箭头它加上动态的效果,动态效果的实现我采用的是间隔显示法,即每个动画周期内根据自定义点间隔显示点,同时隐藏上一周期显示的点。原创 2021-12-09 13:59:58 · 3751 阅读 · 2 评论 -
Qt QML绘制热力图实现原理
由于需要在QML地图中使用,因此使用QQuickPaintedItem绘制,并注册至QML中使用使用QImage绘制渐变透明度图,以每个位置点中心绘制透明度渐变的圆,圆的半径就是热力图的衍射程度。这样同一个位置叠加的点越多,该位置的越不透明。假定所有点中重复度最高的位置(重复度为N)透明度为不透明,则每个衍射渐变圆的透明度就是255/N。得到的QImage图片每个像素点透明度则代表了该位置点的重复程度,将该图片上每个像素点透明度转为不同的颜色,绘制成的新图片就是热力图原创 2021-12-06 13:04:53 · 2198 阅读 · 0 评论 -
Qt QML地图上绘制热力图(Qt/QML组件)
Qt QML地图上绘制热力图(Qt/QML组件)QML中使用Map加载地图十分好用,但当需要在地图上可视化的展示区域位置数据的疏密程度时用热力图展示效果就会很好,如果需要在QWidget上绘制热力图,只需要将MapHeatImage继承由QQuickPaintedItem改为继承自QWidget即可使用原创 2021-12-02 22:36:55 · 2384 阅读 · 0 评论 -
QML Flickable 在鼠标位置处放大缩小
使用Flickable显示图片、自绘内容或者其他窗口控件时,需要对其内容进行放大缩小时,使用MouseArea修改Flickable的contentWidth即可,但此时缩放后的显示位置有偏移,解决方法为移动缩放内容位置,原创 2021-09-23 12:25:11 · 1113 阅读 · 0 评论 -
QML在Charts中动态修改Series(LineSeries, ScatterSeries, ,SplineSeries)的值
项目需要对Charts中的图表动态的修改Series中数据的值,通过查看帮助文档,发现QML Charts中关于XYSeries的方法的说明如下图,共7个方法,其中数据替换的方法replace只写了一种通过点的值进行替换的方法。原创 2021-09-13 22:40:06 · 2431 阅读 · 0 评论 -
QML Model中添加颜色属性时,“Unable to assign QJSValue to QColor“
当在QML中使用Model控制界面时,如果需要在Model中动态添加颜色属性用于控制界面控件颜色时,直接传入color会报错:Unable to assign QJSValue to Qcolor原创 2021-07-04 18:23:29 · 1947 阅读 · 0 评论 -
QML属性implicitWidth和implicitHeight介绍
对于类似于Image、Text等其中包含内容的控件,width、height只是设置了该控件的框架的宽度和高度,但其中的内容的长度和高度的大小的值是implicitWidth/implicitHeight。一个控件的width和height在控件初始化的时候便确定好了,而implicitWidth/implicitHeight是跟随着控件包含的内容的变化而变化的。原创 2021-06-21 20:34:13 · 3631 阅读 · 0 评论 -
QML播放条控件
该播放条控件能够根据设置的起始时间,提供播放、暂停、变速播放、前进、倒退、滑动条控制,状态显示等功能,控件如图:原创 2021-06-13 17:47:50 · 807 阅读 · 4 评论 -
QML Map中使用Open Street Map(osm)离线地图(瓦片地图加载方式)
当使用QML Map显示地图时,有时候无法连接互联网,因此需要使用离线模式加载地图,加载离线地图瓦片时,需要为插件设置参数信息,其中name表示参数字段,value表示传入的值,此时将下载好的瓦片地图路径填入value中即可实现离线加载,离线瓦片地图下载工具目前我正在完善功能中,功能完善后会开源供大家参考使用,先放osm地图0-8层全球瓦片地图,直接解压缩就可以使用。原创 2021-05-06 19:26:27 · 7106 阅读 · 13 评论 -
在QML中使用SQL Model
在C++中,Qt常用的的Sql数据库有QSqlTableModel,QSqlQueryModel等等,用于数据库处理很方便,那么如果需要在QML中显示SQL数据库数据,要怎么处理呢?C++中的SQL处理的Model模块不支持直接给QML使用,需要将其继承后添加数据绑定的部分功能后,再交由QML进行展示。原创 2021-01-15 16:04:57 · 1412 阅读 · 0 评论 -
QML 自定义TableView控件(在ListView基础上实现类似QTableView功能)
在Qt5.12以前的版本中,对于数据的显示控件有 QtQuick.Controls 2中的ListView, QtQuick.Controls 1中的TableView,而 QtQuick.Controls 1的控件风格和操作习惯不符合QML的整体风格,因此我在ListView的基础上制作了TableView,提供了类似于QTableView中只需要提供model,表头、表数据等等由控件自动绑定相应属性,且控件在保留ListView所有属性的同时,添加了自定义表头,表头默认宽度、表头颜色、字体颜色、表头高度原创 2021-01-13 15:53:06 · 5972 阅读 · 6 评论 -
QML delegate中使用Repeater
在QML界面设计例如ListView中,通过设计delegate来显示代理model中的数据,在delegate中使用属性绑定的方式将model中对象的值显示出来,但如果delegate中使用了Repeater,此时delegate中的model为Repeater的model,显示数据就会出现错误,因此用个小方法:在delegete中添加属性myModel,将delegate的model赋值于myModel原创 2021-01-12 21:35:46 · 995 阅读 · 0 评论 -
QML日期选择控件
Qml中没有现成的日期时间选择控件,自己做了个,代码实现较为简单,没有过多需要介绍的,控件加载会自动获取当前日期,转动拨盘会根据当前年、月匹配当月天数,代码如下,直接复制到Qml中加载就可以使用了原创 2021-01-07 13:33:38 · 2570 阅读 · 3 评论 -
Qt QML中chartview使用鼠标动态跟随数值(AreaSeries十字交叉定位)
之前写过关于在LineSeries中实现十字交叉定位数据,上一篇:鼠标动态跟随数值LineSeries(十字交叉定位),该方法需要鼠标放置在图表折线上时由Hovered信号返回位置点数据。但如果是AreaSeries时,使用该方法返回的则是面积图内部点的位置,无法实现上图中的效果,因此使用MouseArea实现,原创 2020-12-01 22:14:52 · 3711 阅读 · 0 评论 -
QML在ChartView中使用Qt.createComponent动态创建图表
有时候项目需要自定义Series时,就需要使用Qt.createComponent来创建,使用该方法创建的Series通过属性横纵坐标(axisX、axisY)或方位距离坐标(axisAngular、axisRadial),动态创建的Series不会显示因为无法匹配坐标,应该使用ChartView中的setAxisX、setAxisY来匹配Series的坐标。原创 2020-12-01 22:08:12 · 861 阅读 · 0 评论 -
向QML中传递C++中自定义的数据类型数组List<T>
而我们自定义的数据类型数列肯定无法直接传递,因此只能使用QVariantList进行传递,首先我们创建自定义数据类型PointDataF,该数据类型需要满足以下几个条件:有一个默认的公有构造函数有一个公有的拷贝构造函数有一个公有的折构函数并在头文件总使用Q_DECLARE_METATYPE(PointData)宏声明,这样的自定义数据类型数据值就可以保存在QVariant对象中了原创 2020-11-26 17:08:44 · 3019 阅读 · 1 评论 -
给QML传递在C++中自定义数据类型(Class)的数据
在C++中,结构体/类均可用于自定义数据类型,也正是这些特性让我们的程序变得更加的灵活。但如果是在C++中定义了某一个数据类型Class,使用该数据类型进行计算后需要在QML中使用该数据类型时怎么办呢?有人可能想讲C++类注册到QML中去行不行?或者调用C++中暴露的函数获得返回值?原创 2020-11-26 12:46:20 · 4155 阅读 · 8 评论 -
QML地图中使用MapItemView
MapItemView用于展示地图控件,数据来源为model(ListModel、RouteModel等)。是不是和ListView很相似,仅仅不同于MapItemView的代理Delegate需要为地图控件,即位置设置为经纬度坐标。ListView的Delegate控件为桌面控件,位置设置为屏幕位置。原创 2020-08-25 12:41:08 · 4394 阅读 · 14 评论 -
QML圆形波浪百分比进度条控件
项目需要做个水球状的百分比控件,因此用Canvas画了一个,原理比较简单,底层画一个正弦波,上面覆盖一个圆,然后两个图层Clip后即可得到需要的形状,代码较为简单,该控件可修改前景色、背景色、球体边框颜色;可自定义是否开启水波动画等功能(水波动画由计时器重绘而成,讲究效率的代码中不建议开启,建议在数据改变时设置数值的方式添加动态效果),DEMO中的控件直接加入工程即可使用原创 2020-08-03 18:16:02 · 1090 阅读 · 0 评论 -
QML中chart图表曲线鼠标点击拖拽移动方法
有时在QML开发中需要在chart图表中进行放大缩小,拖拽图表曲线进行查看,ChartView中提供了四种移动图表曲线的方法,四种方法移动的单位均为像素,因此如果需要进行鼠标拖拽,需要进一步进行坐标转化原创 2020-07-23 13:24:20 · 2627 阅读 · 0 评论 -
QML中使用 VLC-Qt 播放网络视频流(附实例)
VLC-Qt库:一个在libVLC基础上结合了Qt框架的开源库。它提供了媒体播放的视频、音频处理控制的核心类,并提供基于QWidget和QML的GUI框架。QWidget中使用VLC方法见我博文:https://blog.csdn.net/zjgo007/article/details/106353952此文介绍在QML中使用VLC播放网络流视频原创 2020-07-23 13:05:51 · 4894 阅读 · 21 评论