QML学习之路
关注
分享
扫一扫
文章平均质量分 51
qt quick的学习中遇到的问题，以及实例化讲解如何使用、自定义一些组件
hp_cpp
这个作者很懒，什么都没留下…
展开
-
QML圆形头像（二）继承QQuickPaintedItem抗锯齿效果更好
用C++类继承QQuickPaintedItem，然后重写void paint(QPainter *painter);这样也可以实现圆形头像的效果，不需要用qml中的蒙板，而且抗锯齿效果更好。circleHead.h#ifndef CIRCLEHEAD_H#define CIRCLEHEAD_H#include <QtQuick/QQuickPaintedItem>#in...原创 2019-08-28 20:33:55 · 2499 阅读 · 0 评论 -
在QML中加载不同字体
FontLoader的说明FontLoader可以通过名字、本地路径、网络url路径三种方式加载字体。//通过名字，加载系统安装的字体 FontLoader { id: fixedFont; name: "Courier" }//加载本地的一个字体文件FontLoader { id: localFont; source: "content/fonts/tarzeau_ocr_a.ttf...原创 2019-08-10 18:11:12 · 1929 阅读 · 0 评论 -
Qt Quick实现的涂鸦程序
之前一直以为 Qt Quick 里 Canvas 才可以自绘，后来发觉不是，原来还有好几种方式都可以绘图！可以使用原始的 OpenGL（Qt Quick 使用 OpenGL 渲染），可以构造QSGNode 来绘图，还可以使用 QPainter ！哇， QPainter 我很熟悉啊。于是，我用 QPainter 结合 QML 实现了一个简单的涂鸦程序： PaintedItem 。它有下列功能：设...转载 2019-07-30 14:04:54 · 628 阅读 · 0 评论 -
QML官方Demo学习之Scene Graph - Painted Item
在Qt帮助文档中搜索“Scene Graph - Painted Item ”可以看到，原来的代码是写成QML调用C++插件的方式。由于插件方式对不熟悉的同学来说，可能要踩一些坑，其实可以放在一个工程里，通过qmlRegisterType的方式进行注册，然后在qml中进行调用。QQuickPaintedItem继承自QQuickItem，而QQuickItem就是Qml中的Item。QQuic...原创 2019-07-29 21:10:11 · 1196 阅读 · 0 评论 -
QML插件扩展
转自：http://www.cnblogs.com/yanhuiw/p/4719597.html准备分两节来介绍QML扩展插件，分别为（一）基于QML文件的扩展方式（二）基于C++的插件扩展这篇先介绍基于QML的插件扩展。先介绍几个基本概念：qmldir: 用于组织自定义的QML插件，qmldir的具体写法可参考.qmltypes：qml插件的解释文件，用于QtCreator语法高亮...转载 2019-07-29 15:50:32 · 311 阅读 · 0 评论 -
Qt/QML学习资料收集
Qt5官方demo解析集系列教程（一共37个）：https://blog.csdn.net/cloud_castle/article/category/2123873/2?或者https://www.kancloud.cn/cloudcastle/qt5-demo/109880Scene Graph - Painted Itemhttps://doc.qt.io/qt-5/qtquick-...原创 2019-07-28 22:15:31 · 374 阅读 · 0 评论 -
qml中MouseArea重叠时事件响应问题
先看Qt帮助文档中的例子：搜索propagateComposedEvents可以看到该例子：import QtQuick 2.0Rectangle { color: "yellow" width: 100; height: 100 MouseArea { anchors.fill: parent onClicked: consol...原创 2019-07-28 19:06:11 · 2475 阅读 · 1 评论 -
QML中的SmoothedAnimation动画
SmoothedAnimation：一个特定的NumberAnimation类型，当目标值改变时会在动画中提供一个平滑过渡的过渡效果。import QtQuick 2.9import QtQuick.Window 2.2Window { visible: true width: 800 height: 600 title: qsTr("Hello World...原创 2019-07-28 17:26:53 · 520 阅读 · 0 评论 -
NumberAnimation数字类动画
转自：https://blog.csdn.net/lvmengzou/article/details/86692112import QtQuick 2.3import QtQuick.Window 2.2Window { id: win visible: true width: 400 height: 400 Rectangle{ y...转载 2019-07-28 17:17:38 · 542 阅读 · 0 评论 -
QML实现渐变侧滑效果——显示和隐藏
当看到一个博文，用一个NumberAnimation实现QML实现渐变侧滑效果，从右往左出现的时候，我就想：要实现一个从右往左出现，动画结束后，点击鼠标，又从左往右隐藏。这样的时候，就可以实现一个侧边的面板，响应鼠标（或者键盘）事件，出现或者隐藏。test.qml代码：import QtQuick 2.0Rectangle { id: root width: 300 ...原创 2019-07-28 16:21:58 · 1986 阅读 · 2 评论 -
QML一个漂亮的仪表盘
使用QML中的CircularGauge控件，需要import QtQuick.Extras 1.4Gauge.qml：import QtQuick 2.7import QtQuick.Controls 2.0import QtQuick.Controls.Styles 1.4import QtQuick.Extras 1.4import QtQuick.Extras.Private ...原创 2019-07-28 15:11:17 · 4823 阅读 · 0 评论 -
QML笔记-QML基本数据类型的使用
转自：https://blog.csdn.net/qq78442761/article/details/90604216文章目录基本概念举个栗子基本概念这里的数据类型不仅仅有C++里面的int，String等，还有个很有特点的类型var，这个又可以放数组，也可以放函数，也可以混着换，很少有趣。举个栗子程序运行截图如下：后台打印如下:QML debugging is enabled...转载 2019-07-28 09:04:17 · 936 阅读 · 0 评论 -
QML弹出多级菜单
RightPopUpMenu.qmlimport QtQuick 2.5import QtQuick.Controls 2.5Menu { id: firstMenu title: qsTr("剪切") Action { text: qsTr("剪切"); onTriggered: { console.log...原创 2019-07-28 08:32:51 · 3535 阅读 · 0 评论 -
QML实时预览
如果能修改qml文件，马上看到修改的效果，就会特别方便。以下是从国外的某视频网站看到的教程。每次保存修改的qml文件后，就能看到运行的效果。只是需要自己手动在main.cpp文件中添加qml文件所在的目录。filewatcher.h文件：#ifndef FILEWATCHER_H#define FILEWATCHER_H#include <functional>#inc...原创 2019-07-26 16:42:07 · 3168 阅读 · 0 评论 -
QML中的信号和信号处理
信号处理器附加信号处理器Connections使用connect()函数连接信号和槽自定义信号1. 信号处理器QML中使用on+信号的方式作为信号处理器，来处理所所发送的信号。比如相应按钮的点击事件，代码如下：Button { text: '退出' anchors.centerIn: parent onClicked: { Qt.quit(...转载 2019-07-21 21:50:38 · 1177 阅读 · 0 评论 -
QML中mapToItem和mapFromItem的使用
在Qt帮助文档里object mapToItem(Item item, real x, real y)object mapToItem(Item item, real x, real y, real width, real height)object mapFromItem(Item item, real x, real y)object mapFromItem(Item item, r...原创 2019-07-21 21:35:48 · 3693 阅读 · 0 评论 -
Qt中自定义可编辑TreeView的Model
通过上一篇博文《Qt中自定义只读TreeView的Model》，我们介绍了用C++如何写一个只读TreeView的Model，接下来我们需要其具有编辑功能。类比自定义ListView的Model，我们发现，让其具有可编辑功能，只需要加三个必要的接口：Qt::ItemFlags flags(const QModelIndex &index) const override;bool s...原创 2019-07-19 21:33:04 · 3786 阅读 · 0 评论 -
Qt中自定义只读TreeView的Model
通过学习Qt自带的例子和帮助文档，简化了其中的一个例子，来学习如何自定义TreeView的Model。以下是自定义一个只读的TreeView的Model，实际中可以直接复制过来使用，避免重复造轮子。官方的文档一直都是很好的学习资料，尤其是官方的例子和help文档。本文参考了官方的Simple Tree Model Example例子。这是简单的树状结构，可以看出行的结构，但是缺乏列的信息。...原创 2019-07-19 17:55:33 · 1879 阅读 · 0 评论 -
qml中text显示不同颜色或大小的文字
运行效果：import QtQuick 2.9import QtQuick.Window 2.2import QtQuick.Layouts 1.12Window { visible: true width: 640 height: 480 title: qsTr("Hello World") ColumnLayout { Tex...原创 2019-07-18 21:29:19 · 6689 阅读 · 0 评论 -
QML中ListView的C++模型（三）
Model支持插入和删除行，需要自己添加插入和删除的函数，并且在插入函数中（插入数据前）调用void QAbstractItemModel::beginInsertRows(const QModelIndex &parent, int first, int last)插入数据完成后，调用void QAbstractItemModel::endInsertRows()；类似地，在...原创 2019-07-18 09:52:18 · 909 阅读 · 0 评论 -
QML中ListView的C++模型（二）
接上一篇，在stringlistmodel.h中添加Qt::ItemFlags flags(const QModelIndex &index) const override;bool setData(const QModelIndex &index, const QVariant &value, int role) override;在stringlistmode...原创 2019-07-17 22:21:32 · 534 阅读 · 0 评论 -
QML中ListView的C++模型（一）
在Model-View_delegate框架中，C++自己定义的Model一直都没有完全掌握，现在对自己学到的做一些简单的总结和用例子来展示。例子一：main.qml中import QtQuick 2.9import QtQuick.Window 2.2import QtQuick.Layouts 1.3import QtQuick.Controls 2.0Window { ...原创 2019-07-17 22:14:50 · 1668 阅读 · 0 评论 -
QML中ListView向上滚动效果
最近在做一个小的音乐播放器，歌词滚动效果在qml中居然可以很容易的实现。在QML的源码中找到思路的，现在就把这种效果单独做了个demo出来。利用的是listView的preferredHighlightBegin和preferredHighlightEnd源文件：main.qmlimport QtQuick 2.9import QtQuick.Window 2.2Window {...原创 2019-07-16 17:56:47 · 2064 阅读 · 4 评论 -
QML歌词从左到右变色效果
要实现的效果如下：代码：import QtQuick 2.9import QtQuick.Window 2.2import QtGraphicalEffects 1.0Window { visible: true width: 400 height: 100 title: qsTr("Hello World") Text{ i...原创 2019-07-07 21:03:59 · 847 阅读 · 2 评论 -
qml圆形头像（一）—— 使用蒙板
圆形头像效果：qml代码：import QtQuick 2.3import QtGraphicalEffects 1.0Rectangle { id: img width: 150 height: 150 radius: width/2 color: "black" Image { id: _image smooth: true visible: false...原创 2019-06-10 15:29:11 · 1233 阅读 · 0 评论 -
QML中使用C++Model
转自：https://blog.csdn.net/fxy0325/article/details/81434762使用C++model：当需要少量数据时，QML中直接定义模型时非常方便。当数据较为复杂或者想在c++里操纵数据时，可以在C++中设计Model并在qml中展示数据，这样会更加稳定可靠。代码实现：datamodel.h#ifndef DATAMODEL_H#define D...转载 2019-05-24 12:03:43 · 1496 阅读 · 0 评论 -
Using C++ Models in QML
参考youtube上qt官方的视频：youtube视频下方本来有github地址的，进去后代码为空，就照着视频教程把代码重新敲了一遍。主要功能1.实现了一个简单的待办事项2.删除勾选的一行记录，也可以删除多行已经勾选的记录是用C++继承QAbstractListModel实现了model，然后给qml调用。运行效果：源码之前了无秘密：ToDoList.qmlimport QtQ...原创 2019-05-23 19:43:39 · 497 阅读 · 1 评论 -
QML中ListView的几种数据模型
原文的博客写得比较清楚，可惜代码的排版有点不敢恭维，自己进行了缩进。原文地址：https://blog.csdn.net/qq_35173114/article/details/80873842在QML中，经常会用到ListView控件，我们主要用到MVC模式，下面介绍几种常用数据模型,其中包括QML和C++模型方式一：ListModel:ListModel是一个简单的ListElemen...转载 2019-05-22 12:07:57 · 1183 阅读 · 0 评论 -
QML实现下拉菜单
用qml实现http://sc.chinaz.com/jiaobendemo.aspx?downloadid=121210151632660原创 2019-05-04 11:54:56 · 6978 阅读 · 0 评论 -
windows上QML运行时的问题module "QtQuick" is not installed解决方法
windows上，安装的Qt5.12.0版本，使用的是vs2015 x64，之前都没报错的，今天突然报错module "QtQuick" is not installedmodule "QtQuick.Controls" is not installedmodule "QtQuick" is not installedmodule "QtQuick.Controls" is not ins...原创 2019-04-02 17:46:06 · 15444 阅读 · 0 评论 -
QML中使用StackView实例
参考：https://blog.csdn.net/cqltbe131421/article/details/83148918这个是简单的应用。原作者在github上放上了源码，能在实际中用，方便进行子界面切换：地址：https://github.com/cedoduarte/QML_StackView_example上代码：main.qml文件：import QtQuick 2.9i...原创 2019-03-21 15:06:05 · 7291 阅读 · 2 评论 -
QML State类型，实现状态切换，图片切换等效果（二）——默认状态和when属性设置
继续上一篇，所有基于Item的组件都有一个state属性和一个默认状态。默认状态就是空字符串(“”)，包含了项目的所有初始值。import QtQuick 2.6import QtQuick.Controls 1.5ApplicationWindow { visible: true width: 640 height: 480 title: qsTr(...原创 2018-06-29 10:14:30 · 1569 阅读 · 0 评论 -
QML State类型，实现状态切换，图片切换等效果（一）
QML中所有基于Item的对象都有一个state属性，依赖于状态驱动的情况下，都可以用State类型的一组属性设置: 1. 显示一些组件而隐藏其他组件； 2. 为用户呈现不同的动作； 3. 开始、停止或者暂停动画； 4. 执行一些需要在新的状态中使用的脚本； 5. 显示一个不同视图或者画面； 举例一：import QtQuick 2.2Item { wid...原创 2018-06-29 10:01:11 · 5583 阅读 · 1 评论 -
QML 自定义Button样式，实现按钮三态切换
初学QML的时候，遇到了一些问题，参考这篇文章，实现了按钮的正常、鼠标经过和鼠标按下的图片切换。遇到了一些问题，比如背景色有白边，设置图片大小不生效。尝试了几种方法后，还是发现原来的方法比较好。记录一下自己改良后的代码：import QtQuick 2.0import QtQuick.Controls 1.4import QtQuick.Controls.Styles 1.4Butto...原创 2018-06-27 17:01:06 · 10428 阅读 · 0 评论 -
QML基本类型color的使用
QML基本类型color的使用color可以用以下几种方式表示： （1）颜色名 （2）”#RRGGBB”格式的十六进制（不带透明度） （3）”#AARRGGBB”格式的十六进制（AA表示透明度）00~FF表示透明度，00代表完全透明，FF表示完全不透明 举例： Rectangle { color: "steelblue" width: 40; height: 4...原创 2018-06-27 10:16:14 · 5434 阅读 · 2 评论