qml

在对 Qt Quick 和 QML 有了一些了解后，现在我们来熟悉一下这个全新的 Qt Quick Designer 界面。 在这一篇中我们会用一个例子来介绍一下 Qt Quick Designer 界面，但是不会对代码进行过多的讲解。到下一篇我们讲解 QML 组件时会对这个程序生成的代码进行逐行讲解，再往后的几篇，我们就会对 Qt Quick 中的几个特色功能进行举例讲解，而在讲解例子的同时，我们也会将 QML 语言的讲述加入其中。我们会在完成几个实例的同时掌握QML语言。 我们新建一个Qt QML Application，我这里的工程名为“helloWorld”。 这是整个 Qt Quick Designer 界面，它由几个面板组成，下面分别进行介绍。 主设计面板，也就是我们下面所说的场景。这是我们的主设计区，所有的项目都要放到这里，当程序执行时，就是显示的这个面板上的内容。 Navigator导航器面板。场景中所有的项目都在这里列出。在这里，我们可以选中一个特定的项目，那么场景中对应的项目也会被选中，我们也可以在这里拖拽项目来更改它们的从属关系，或者点击项目后面的“眼睛”图标来设置它是否可以显示。 Properties属性面板。在这里我们可以设置项目的属性。比如项目名称，填充颜色，边框颜色，项目大小和位置，以及项目的缩放，旋转和不透明度等。 Library库面板

效果 状态 绿灯 黄灯 红灯 go 亮 灭 灭 wait 亮 亮 灭 stop 灭 灭 亮 鼠标点击之后，依次在这三个状态循环，类似状态机原理。 代码 当状态改变时，去改变元素的属性。 import QtQuick 2.12 import QtQuick . Window 2.2 import QtQuick . Layouts 1.3 Window { visible : true width : 640 height : 480 title : qsTr ( "Hello World" ) ColumnLayout { id : col spacing : 20 // anchors.fill: parent anchors . centerIn : parent Rectangle { id : rec_green width : 50 height : 50 radius : width / 2 color : "green" border . color : Qt . darker ( color ) } Rectangle { id : rec_yellow width : 50 height : 50 radius : width / 2 color : "yellow" border . color : Qt . darker ( color ) }

一、背景 网上找到一位大神的生成二维码Qt QML Demo，想要运行一下看看，编译很顺利，但是一运行就报 “module "com.duoduo.components" is not installed” 这个错误，这个问题费了些时间，所以还是简单记录下。 二、 首先贴出来我参考的链接： 链接1： 基于QML开发的二维码生成的QML插件 链接2： QML插件扩展（一） 链接1是我获取Demo的源头，但是没有说关于我遇到的问题相关（大神应该是没遇到）。链接2是帮助我解决问题的方法。 实际上很简单，再报这个错误的时候添加一行代码即可： engine.addImportPath("/home/xxx/xxx/qrencode/qtquickqrencode-master/"); 但是这块有三个 小坑需要注意 ： 1、你添加的路径是你制作插件时qmldir文件中Moudle后的那个名字（ 根据我目前的实践，moudle后跟的名字不只是导入时用到的名字也是模块或者叫插件应该所在的路径 ）的上一级目录，如我的： qmldir文件内容： 代码中的路径 ： /home/xxx/xxx/qrencode/qtquickqrencode-master/，就像链接2博客中讲到的一样，路径要到moudle的写的路径的上一级，如我到com文件夹的上一级，如果不是这个路径就会报moudle未安装； 2

1.具体需求：当Qt开发项目中需要实现简单的 动态酷炫动画 效果时，我们可以使用Qt中的 QQuickWidget 来实现，同时还可以使用 QML编程 来实现具体的动画效果，具体实现的效果如下所示： 2.具体操作和实现效果图： 1）按下start按钮，音乐播放界面开始播放，然后出现旋转界面（界面的变化可以通过QML编程来具体实现）； 2) 按下stop按钮，音乐播放界面停止； 3）效果图：（样式没有刻意去设计，QML只是简单的旋转效果） stop下的状态图： 开始播放的状态图： 3.具体代码实现分为三部分： 1）Qt的pro工程文件中加入QQuickWidget功能： QT += quickwidgets 2）新建一个工程简单的工程，如下所示： 在工程中添加一个resource新文件，鼠标右键单击工程->添加新文件->Qt->Qt Resource File，然后在resource file下新建一个目录(add prefix)，添加一个QML File(Qt Quick 2)文件，取名字为musicPlay.qml，操作步骤和前面一样，添加相关的QML代码，具体如下： import QtQuick 2.0 Item { //首字母大写 visible: true width: 150 height: 150 id: rectangleWidget scale : 1.0

Qml开发中的性能Tips(翻译文) 来源 https://cloud.tencent.com/developer/article/1468124 1.关于图像性能Tips 1.1 位图格式对比矢量图格式 Qt支持任何标准图像格式，包括PNG和JPEG等位图格式，以及SVG等矢量图形格式。与位图图像相比，渲染SVG图像很慢。 1.2 异步加载大图像 如果同步加载图像，则会阻塞UI界面。在许多情况下，图像不需要立即可见，因此它们可以是延迟加载的。 如果不需要立即显示图像，则应在单独的线程中异步加载图像。这可以通过将QML的Image异步(asynchronous)设置为true来完成。这样，用户界面就可以保持响应。 请注意，此属性仅对从本地文件系统读取的图像有效。通过网络资源(例如HTTP)加载的图像始终是异步加载的。 1.3 避免调整和缩放 调整大小/缩放是QML中非常繁重的操作。使用原始大小的图像，而不是调整大小图像的大小/缩放大小。 1.4 大图像使用sourceSize属性 图像通常是QML用户界面中使用占用最大的内存。 sourceSize 应与大图像一起使用，因为属性设置为加载的图像则存储着实际像素数。 如果你有一个很大的图像3264 2448，但你设置了sourceSize为204 153，那么它会缩小并将被存储为204*153的内存。 如果图像的实际大小大于

目录 动画流UI ParallelAnimation和SequentialAnimation动画组元素 状态切换机制效果动图： StateText.qml main.qml 设计组合动画 CAnimate.qml main.qml 动画流UI 动画流UI就是能使动画的形态做连续的变化，而非突然显现、隐藏或跳出来，主要要两种方式： 状态切换机制 设计组合动画 ParallelAnimation和SequentialAnimation动画组元素 ParallelAnimation：动画会同时进行 SequentialAnimation：动画会一个个串行进行 状态切换机制效果动图： StateText.qml import QtQuick 2.0 Text{ id: stext color: "red" //设置字体初始颜色 font.family: "Helevetica" //设置字体 font.pointSize: 30 //设置初始字号 font.bold: true //设置加粗 MouseArea{ id: mArea anchors.fill: parent } states: [ //包含元素所有状态的列表 State { name: "highlight" //状态名称 when: mArea.pressed //当鼠标按下时进图状态 PropertyChanges {

前言 一直听闻QML无比强大好用，工作中需要扣一个同时播放视频的Demo，所以就趁这个机会研究了一下。 效果图和源码 源码仓库 主要设计 主页面QML import QtQuick 2.12 import QtQuick.Window 2.12 Window { visible: true width: 640 height: 480 Counter{ id : counter } Player { id:player1 visible: true anchors.left:parent.left anchors.top:parent.top width: parent.width height: parent.height } Player { id:player2 visible: true x:parent.x y:parent.height-height width: parent.width/3 height: parent.height/3 counter:counter canchangez : true } Player { id:player3 visible: true x:player2.width y:parent.height-height width: parent.width/3 height: parent.height/3 counter

在QML和C ++之间交换数据值时，它们将由QML引擎转换为具有适用于QML或C ++的正确数据类型。 这要求交换的数据具有引擎可识别的类型。 QML引擎为大量QT C++数据类型提供内置支持。此外，自定义C++类型可以注册到QML类型系统中，使它们可以用于引擎。 该页面讨论了QML引擎支持的数据类型以及如何在QML和C ++之间转换它们。 数据所有权 当数据从C ++传输到QML时，数据所有权始终由C ++保留。 该规则的例外情况是从显式C ++方法调用返回QObject时：在这种情况下，除非通过调用QQmlEngine将对象的所有权显式设置为与C ++一起使用，否则QML引擎假定该对象的所有权： 使用QQmlEngine :: CppOwnership指定的setObjectOwnership（） 此外，QML引擎尊重Qt C ++对象的常规QObject父所有权语义，并且永远不会删除具有父对象的QObject实例。 基本Qt数据类型 默认情况下，QML识别以下Qt数据类型，当从C ++传递到QML时，它们会自动转换为相应的QML基本类型，反之亦然： Qt Type QML Basic Type bool bool unsigned int, int int double double float, qreal real QString string QUrl url