QML
文章平均质量分 85
缘如风
这个作者很懒,什么都没留下…
展开
-
QML实现钟表效果
Qt5以后的版本,主要加大的对Qt Quick的改进。现实最新的版本可以利用Qt Quick实现很多的绚丽的效果。此里只是利用画布Canvas简单钟表的效果(暂时没用实现动态效果)。效果如下: 源码如下import QtQuick 2.6import QtQuick.Window 2.2Window { visible: true width: 740 height:原创 2017-08-06 09:51:59 · 1480 阅读 · 0 评论 -
QML之Menu的动态添加MenuItem
菜单是很常用的一个控件。可以利用ListView自定义实现,也可以利用Menu直接实现。本文利用的是QtQuick.Controls 2.3(Qt版本是在Qt5.7之后引入)下面的Menu。效果如下:代码如下:import QtQuick 2.9import QtQuick.Controls 2.3ApplicationWindow { visible: true width...原创 2018-05-29 20:44:13 · 6379 阅读 · 1 评论 -
canvas 实现波浪线--水波动态效果
效果图如下:代码如下import QtQuick 2.6import QtQuick.Window 2.2import CanvansItem 1.0import "./Drawjs.js" as DjsWindow { visible: true width: 1500 height: 700 title: qsTr("Hello World") ...原创 2018-06-21 09:58:53 · 10555 阅读 · 0 评论 -
QML TableView修改单个Item的颜色
QML 的表格TableView可以实现漂亮的表格效果,当然修改当个item或者整行的字体颜色或者背景功能也是必须的。此例子实现单个item的字体颜色修改,背景色也是如此。效果如下: 具体代码如下:import QtQuick 2.9import QtQuick.Window 2.2import QtQuick.Controls 1.4Window { vis...原创 2018-08-23 20:37:29 · 4668 阅读 · 1 评论 -
QML实现网页左右滑动的轮播图效果
网页中有很多的左右滑动的图片轮动的效果。QML实现此效果的两种方式。PageIndicator和TabBar 也对应两种样式。其中左右滑动的动画效果是利用SwipeView的默认切换动画效果import QtQuick 2.9import QtQuick.Controls 2.2ApplicationWindow { visible= true width= 6...原创 2018-09-12 16:51:44 · 3010 阅读 · 0 评论 -
QML实现新闻热点向上滚动的效果
实现思路:一个可视的Rectangle设置其高度等于ListView的item的高度,这样保证显示一个。通过移动ListView的x值得位置实现向上滚动的效果。利用动画修改x的值,达到动态效果。效果如下:截图效果不好哈具体代码如下用了两种方式,推荐使用第一种方式,看个人。重点是实现思路。import QtQuick 2.9import QtQuick.Controls 2...原创 2018-09-13 14:09:46 · 977 阅读 · 1 评论 -
QtChart中BoxSet自定义样式的实现
QtChart提供了一个实现K线图的方法。本例中使用QML中BoxSet实现盒子的填充色以及箱线颜色的修改。主要是利用代码示例如下BoxSet的brush和pen属性实现颜色的变化。brush的属性可以添加一个color即可。但是pen不能,所以利用c++实现从外面获取方式。int main(int argc, char *argv[]){ QCoreApplicati...原创 2018-12-21 15:07:43 · 1298 阅读 · 0 评论 -
QML自定义实现ScrollBar
Qt自带的ScrollBar滚动条或多或少有点问题(测试时候,有的时候点击拖着不好用;放大缩小时候滚动条也不好用)简单实现了一个/* 必须设置属性 property var target property var lengthvalue //记录外面大的区域的大小 和target不同 Point(x,y) x:width, y:height*/impor...原创 2018-12-19 09:54:12 · 3533 阅读 · 0 评论 -
QML导航栏的实现
实现一个侧边导航栏效果。具体实现如ItemRect.qmlimport QtQuick 2.9import QtQuick.Controls 2.2import QtQuick.Layouts 1.3Rectangle{ id : itemrect width: 100; height: 30 color: "#000000" p...原创 2019-01-16 13:10:55 · 3598 阅读 · 1 评论 -
QML ListView添加滚动条
ListView添加滚动条,利用ScrollBar.horizontal: ScrollBar { id: hbar; active: vbar.active }; ScrollBar.vertical: ScrollBar { id: vbar; active: hbar.active }的方式有问题(水平方向的比较严重)。所以采用另外一种方式。代码如下import QtQuick...原创 2019-01-30 11:09:31 · 5795 阅读 · 1 评论 -
QtChart实现坐标(y)轴不等分
翻看QtChart的例子的时候,发现了一个QCategoryAxis(QML中是CategoryAxis),允许自已定义范围的长度。这样就可以实现坐标轴不等分。需要QtCharts 2.2代码如下(QML方式)ChartView { id : chartview1 width: 700 height: 300 ...原创 2019-02-26 15:43:44 · 2821 阅读 · 0 评论 -
QtCharts实现梯形折线图
梯形折线虽然不常用,但是偶尔也是会用到的。像那QCustomPlot、echart就实现了这个功能。所以决定用QtCharts实现梯形折线图(QML实现的)。效果如下代码如下import QtQuick 2.9import QtQuick.Window 2.2import QtCharts 2.2//实现梯形折线//原理:在同一个点给不同值,一个值是前面值,一个是后面值...原创 2019-03-15 13:40:15 · 1303 阅读 · 0 评论 -
QML实现树形组件
代码下载地址链接: https://pan.baidu.com/s/1e1hkEP5LNatgw6x_3UPGVA提取码: hc77参考文章//https://blog.csdn.net/jackfeng44/article/details/78813534原创 2019-03-29 20:48:13 · 2323 阅读 · 7 评论 -
QML性能优化
可以参考官方提示https://doc.qt.io/qt-5/qtquick-performance.html大牛翻译的https://blog.csdn.net/xqhrs232/article/details/761286331.图片对于本地图片采用异步加载asynchronous设置为true(网络图片都是异步加载)显式来源大小,如果应用程序加载大图像但是将其显示在一个小尺寸元...转载 2019-04-18 15:59:35 · 1680 阅读 · 0 评论 -
QML中创建线程WorkerScript
(记录一下)QML界面卡顿时也可以采用线程的方法。下面提供二个思路:1.Qt提供了一个WorkerScript来将脚本中的执行的函数放到一个线程中执行。WorkerScript用于生成新的线程,并通过消息进行通信。自行查看Qt的帮助文档,有相关例子。网站https://doc.qt.io/qt-5/qtquick-threading-example.html2.采用C++中的QT...原创 2019-04-18 20:45:26 · 2909 阅读 · 0 评论 -
QML实现弹幕功能
弹幕在视频网站上很流行。这里用QML实现一下基本功能。主要用到了动画以及动态创建组件的相关知识。效果如下(图片的动态效果不太好O(∩_∩)O哈哈~)代码如下:import QtQuick 2.9import QtQuick.Controls 2.2ApplicationWindow { visible: true width: 640 height: 480 ...原创 2018-05-24 21:02:25 · 600 阅读 · 0 评论 -
QML Canvas的简单实用
QML提供一个和HTML5中一样的Canvas画布。这里介绍一个Canvas的使用网站。1.实现一个小球的自由落体//自由落体Canvas{ id : canvas width: 500; height: 500 property real gravity: 9.8 //重力加速度 property real droptime: 0; //下落时间 ...原创 2018-05-15 20:47:54 · 6571 阅读 · 0 评论 -
利用QML画布实现一个泡泡对话 talk bubble
canvas画布实现的泡泡对话。类似于微信等聊天的效果转载 2017-09-16 09:43:04 · 1591 阅读 · 0 评论 -
QML 实现简单的翻页功能
QML利用动画实现简单翻页原创 2017-10-17 20:35:09 · 2896 阅读 · 0 评论 -
QML 实现3D进度条(伪3D)
QML利用DropShadow实现的3D效果的进度条原创 2017-10-10 21:50:03 · 1551 阅读 · 0 评论 -
qml 利用粒子实现文字显示
QML实现文字的粒子效果原创 2017-10-14 09:40:20 · 1170 阅读 · 0 评论 -
QML 页面指示符PageIndicator
页面指示符 PageIndicator原创 2017-10-25 20:36:17 · 2455 阅读 · 0 评论 -
QML 实现导航栏 类似于TabBar
利用QML实现导航栏的功能原创 2017-12-14 20:37:48 · 5149 阅读 · 0 评论 -
QML实现文字带光晕效果
漂亮的界面还是QML实现呀。本次实现的是文字带光晕的效果。利用QtGraphicalEffects中的Glow。实现代码如下Text { id : titleText font.family: "Helvetica" width: parent.width font.pointSize: title原创 2018-01-04 19:32:31 · 3356 阅读 · 0 评论 -
QML实现带.阴影按钮
QML自带的按钮效果不是很好,所以自定义了一个按钮。QML也支持这种高度自定义控件。主要有阴影效果,悬浮变色和按钮动画。效果如下主要代码如下 MyButton.qmlimport QtQuick 2.6import QtGraphicalEffects 1.0/******************************************************************...原创 2018-02-26 20:23:06 · 2935 阅读 · 0 评论 -
QML 自定义CheckBox
实现QML如下 //[1] Rectangle{ id: checkbox1; property bool buttonEnabled: true property var selectedcolor: "#999999" //修改样式 function setStyle(style) {原创 2018-02-07 16:43:45 · 1040 阅读 · 0 评论 -
QML TableView编辑使用
在开发中,表格使用还是很频繁的。qt例子中的比较丑,行高不能修改。本例QML实现动态表头、添加数据,自定义样式,修改行高,在c++中动态添加数据等。具体效果如下:核心代码TableViewItem.qmlimport QtQuick 2.6import QtQuick.Window 2.2import QtQuick.Controls 1.4import QtQuick.Controls.S...原创 2018-04-11 20:14:28 · 18448 阅读 · 7 评论 -
QML QtChart 中 DateTimeAxis使用
QtChart曲线设置时间轴需要用到QDateTimeAxis。在这里主要介绍QML中的使用。QML中需要用到DateTimeAxis,同时介绍使用QML中的Date对象。看一下效果具体代码如下:import QtQuick 2.9import QtCharts 2.2ChartView{ Rectangle{ width: 20; height: 20 colo...原创 2018-05-10 09:21:09 · 5280 阅读 · 2 评论 -
QML Tumbler使用介绍
利用QML 的Tumbler实现时间选择器的功能。Tumbler在这里介绍的是QtQuick.Extras下面的。(QtQuick.Controls中也有一个,但是略微不同)。Qt官网使用说明在此介绍Tumbler的样式修改以及数值修改、获取功能。通过Tumbler的style属性实现。 Qt提供了TumblerStyle来实现属性的修改。具体源码如下:import QtQuick 2.9imp...原创 2018-05-05 10:28:52 · 4070 阅读 · 2 评论 -
QML 发布时 libeay32.dll错误
使用QML中QtChart在编译或者发布时,提示“无法定位序数4364于动态库LIBEAY32.DLL上。”出现这个问题是因为libeay32.dll库没有对上。程序在启动时默认加载的C:\Windows\System32中的。只要把这个下面的libeay32.dll删除即可。...原创 2018-05-15 20:16:16 · 405 阅读 · 0 评论 -
QML自定义信号槽的实现与使用
参考网站(qt官网说明)本文只在说明自定义信号槽的实现与使用,不提供代码。如有需要请在参考网站里找。1.信号槽的声明与使用2.信号取消关联3.信号与信号之间传递...原创 2019-08-23 11:57:37 · 3004 阅读 · 0 评论