QML
文章平均质量分 82
QML基础学习与应用!
code_shenbing
世界需要程序员,而我就是其中一员!
展开
-
QML数字动画
动画被用于属性的改变。一个动画定义了属性值改变的曲线,将一个属性值变化从一个值过渡到另一个值。动画是由一连串的目标属性活动定义的,平缓的曲线算法能够引发一个定义时间内属性的持续变化。所有在QtQuick中的动画都由同一个计时器来控制,因此它们始终都保持同步,这也提高了动画的性能和显示效果。动画控制了属性的改变,也就是值的插入。这是一个基本的概念,QML是基于元素,属性与脚本的。每一个元素都提供了许多的属性,动画控制了属性的改变,每个元素都有大量的属性可以使用。原创 2023-04-25 17:36:19 · 187 阅读 · 0 评论 -
QML绘图便捷接口类Convenient API
在绘制矩形时,我们提供了一个便捷的接口,而不需要调用stroke或者fill来完成。原创 2023-05-08 13:59:29 · 159 阅读 · 0 评论 -
QML之HTML5画布移植(Porting from HTML5 Canvas)
我们使用一个来自Mozila项目的螺旋图形例子来作为我们的基础示例。原始的HTML5代码被作为画布教程发布。原创 2023-05-08 17:35:05 · 819 阅读 · 0 评论 -
QML画布绘制(Canvas Paint)
在我们场景的顶部我们使用行定位器排列四个方形的颜色块。一个颜色块是一个简单的矩形,使用鼠标区域来检测点击。原创 2023-05-08 17:28:49 · 695 阅读 · 0 评论 -
QML像素缓冲(Pixels Buffer)
当你使用画布时,你可以检索读取画布上的像素数据,或者操作画布上的像素。读取图像数据使用createImageData(sw,sh)或者getImageData(sx,sy,sw,sh)。这两个函数都会返回一个包含宽度(width),高度(height)和数据(data)的图像数据(ImageData)对象。图像数据包含了一维数组像素数据,使用RGBA格式进行检索。每个数据的数据范围在0到255之间。设置画布的像素数据你可以使用putImageData(imagedata,dx,dy)函数来完成。原创 2023-05-08 17:26:02 · 248 阅读 · 0 评论 -
QML组合模式(Composition Mode)
组合模式示范!原创 2023-05-08 17:25:17 · 259 阅读 · 0 评论 -
QML转换(Transformation)
画布有多种方式来转换坐标系。这些操作非常类似于QML元素的转换。你可以通过缩放(scale),旋转(rotate),translate(移动)来转换坐标系。与QML元素的转换不同的是,转换原点通常就是画布原点。例如,从中心点放大一个封闭的路径,你需要先将画布原点移动到整个封闭的路径的中心点上。使用这些转换的方法你可以创建一些更加复杂的转换。原创 2023-05-08 17:23:42 · 527 阅读 · 0 评论 -
QML图片(Images)
QML画布支持多种资源的图片绘制。在画布中使用一个图片需要先加载图片资源。在我们的例子中我们使用Component.onCompleted操作来加载图片。原创 2023-05-08 17:21:07 · 541 阅读 · 0 评论 -
QML阴影(Shadows)
2D对象的路径可以使用阴影增强显示效果。阴影是一个区域的轮廓线使用偏移量,颜色和模糊来实现的。所以你需要指定一个阴影颜色(shadowColor),阴影X轴偏移值(shadowOffsetX),阴影Y轴偏移值(shadowOffsetY)和阴影模糊(shadowBlur)。这些参数的定义都使用2D context来定义。2D context是唯一的绘制操作接口。原创 2023-05-08 17:17:26 · 873 阅读 · 0 评论 -
QML渐变(Gradients)
画布中可以使用颜色填充也可以使用渐变或者图像来填充。原创 2023-05-08 17:15:48 · 885 阅读 · 0 评论 -
QML画布元素
在早些时候的Qt4中加入QML时,一些开发者讨论如何在QtQuick中绘制一个圆形。类似圆形的问题,一些开发者也对于其它的形状的支持进行了讨论。在QtQuick中没有圆形,只有矩形。在Qt4中,如果你需要一个除了矩形外的形状,你需要使用图片或者使用你自己写的C++圆形元素。Qt5中引进了画布元素(canvas element),允许脚本绘制。画布元素(canvas element)提供了一个依赖于分辨率的位图画布,你可以使用JavaScript脚本来绘制图形,制作游戏或者其它的动态图像。原创 2023-05-08 13:23:21 · 394 阅读 · 0 评论 -
QML性能协调(Tunning Performance)
模型,视图与代理: 每个数据的入口是模型,视图通过可视化代理来实现数据的可视化。将数据从显示中分离出来。一个模型可以是一个整数,提供给代理使用的索引值(index )。如果JavaScript数组被作为一个模型,模型数据变量(modelData)代表了数组的数据的当前索引。对于更加复杂的情况,每个数据项需要提供多个值,使用链表模型(ListModel)与链表元素(ListElement)是一个更好的解决办法。原创 2023-05-05 14:03:32 · 210 阅读 · 0 评论 -
QML链表分段(Lists with Sections)
有时,链表的数据需要划分段。例如使用首字母来划分联系人,或者音乐。使用链表视图可以把平面列表按类别划分。原创 2023-05-04 17:22:14 · 347 阅读 · 0 评论 -
QML XML模型(A Model from XML)
由于XML是一种常见的数据格式,QML提供了XmlListModel元素来包装XML数据。这个元素能够获取本地或者网络上的XML数据,然后通过XPath解析这些数据。原创 2023-05-04 17:20:42 · 579 阅读 · 0 评论 -
QML路径视图(The PathView)
路径视图(PathView)非常强大,但也非常复杂,这个视图由QtQuick提供。它创建了一个可以让子项沿着任意路径移动的视图。沿着相同的路径,使用缩放(scale),透明(opacity)等元素可以更加详细的控制过程。原创 2023-05-04 17:17:56 · 1058 阅读 · 0 评论 -
QML形变的代理(Shape-Shifting Delegates)
这个技术展示了展开代理来填充视图能够简单的通过代理的形变来完成。例如当浏览一个歌曲的链表时,可以通过放大当前项来对该项添加更多的说明。原创 2023-05-04 17:15:29 · 249 阅读 · 0 评论 -
QML动画添加与移除元素(Animating Added and Removed Items)
在某些情况下,视图中的显示内容会随着时间而改变。由于模型数据的改变,元素会添加或者移除。在这些情况下,一个比较好的做法是使用可视化队列给用户一个方向的感觉来帮助用户知道哪些数据被加入或者移除。原创 2023-05-04 17:13:35 · 277 阅读 · 0 评论 -
QML代理(Delegate)
当使用模型与视图来自定义用户界面时,代理在创建显示时扮演了大量的角色。在模型中的每个元素通过代理来实现可视化,用户真实可见的是这些代理元素。每个代理访问到索引号或者绑定的属性,一些是来自数据模型,一些来自视图。来自模型的数据将会通过属性传递到代理。来自视图的数据将会通过属性传递视图中与代理相关的状态信息。原创 2023-05-04 17:09:30 · 1119 阅读 · 0 评论 -
QML网格视图(The GridView)
一个网格视图(GridView)也包含了页脚与页眉,也可以使用高亮代理并且支持捕捉模式(snap mode)的多种反弹行为。它也可以使用不同的方向(orientations)与定向(directions)来定位。定向使用flow属性来控制。它可以被设置为GridView.LeftToRight或者GridView.TopToBottom。模型的值从左往右向网格中填充,行添加是从上往下。视图使用一个垂直方向的滚动条。后面添加的元素也是由上到下,由左到右。此外还有flow属性和layoutDirection原创 2023-05-04 17:07:07 · 645 阅读 · 0 评论 -
QML页眉与页脚(Header and Footer)
这一节是链表视图最后的内容,我们能够向链表视图中插入一个页眉(header)元素和一个页脚(footer)元素。这部分是链表的开始或者结尾处被作为代理元素特殊的区域。对于一个水平链表视图,不会存在页眉或者页脚,但是也有开始和结尾处,这取决于layoutDirection的设置。原创 2023-05-04 17:04:58 · 687 阅读 · 0 评论 -
QML键盘导航和高亮
当使用基于触摸方式的链表视图时,默认提供的视图已经足够使用。在使用键盘甚至仅仅通过方向键选择一个元素的场景下,需要有标识当前选中元素的机制。在QML中,这被叫做高亮。视图支持设置一个当前视图中显示代理元素中的高亮代理。它是一个附加的代理元素,这个元素仅仅只实例化一次,并移动到与当前元素相同的位置。在下面例子的演示中,有两个属性来完成这个工作。首先是focus属性设置为true,它设置链表视图能够获得键盘焦点。然后是highlight属性,指出使用的高亮代理元素。高亮代理元素的x,y与height属性原创 2023-05-04 17:01:57 · 345 阅读 · 0 评论 -
QML方向(Orientation)
默认的链表视图只提供了一个垂直方向的滚动条,但是水平滚动条也是需要的。链表视图的方向由属性orientation控制。它能够被设置为默认值ListView.Vertical或者ListView.Horizontal。下面是一个水平链表视图。原创 2023-05-04 16:57:50 · 363 阅读 · 0 评论 -
QML动画类型总结
有几种类型的动画,每一种都在特定情况下都有最佳的效果,下面列出了一些常用的动画:PropertyAnimation(属性动画)- 使用属性值改变播放的动画NumberAnimation(数字动画)- 使用数字改变播放的动画ColorAnimation(颜色动画)- 使用颜色改变播放的动画RotationAnimation(旋转动画)- 使用旋转改变播放的动画原创 2023-05-01 22:01:38 · 1013 阅读 · 0 评论 -
QML应用动画(Applying Animations)
动画可以通过以下几种方式来应用:属性动画 - 在元素完整加载后自动运行;属性动作 - 当属性值改变时自动运行;独立运行动画 - 使用start()函数明确指定运行或者running属性被设置为true(比如通过属性绑定)后面我们会谈论如何在状态变换时播放动画。原创 2023-05-01 22:10:29 · 887 阅读 · 0 评论 -
QML缓冲曲线(Easing Curves)
属性值的改变能够通过一个动画来控制,缓冲曲线属性影响了一个属性值改变的插值算法。我们现在已经定义的动画都使用了一种线性的插值算法,因为一个动画的默认缓冲类型是Easing.Linear。在一个小场景下的x轴与y轴坐标改变可以得到最好的视觉效果。一个线性插值算法将会在动画开始时使用from的值到动画结束时使用的to值绘制一条直线,所以缓冲类型定义了曲线的变化情况。精心为一个移动的对象挑选一个合适的缓冲类型将会使界面更加自然,例如一个页面的滑出,最初使用缓慢的速度滑出,然后在最后滑出时使用高速滑出,类似翻书一样原创 2023-05-01 22:16:17 · 491 阅读 · 0 评论 -
QML动画分组(Grouped Animations)
通常使用的动画比一个属性的动画更加复杂。例如你想同时运行几个动画并把他们连接起来,或者在一个一个的运行,或者在两个动画之间执行一个脚本。动画分组提供了很好的帮助,作为命名建议可以叫做一组动画。有两种方法来分组:平行与连续。你可以使用SequentialAnimation(连续动画)和ParallelAnimation(平行动画)来实现它们,它们作为动画的容器来包含其它的动画元素。原创 2023-05-01 22:30:13 · 1632 阅读 · 0 评论 -
QML状态与过渡(States and Transitions)
另一个选择是可以添加一个“attention”状态,灯会出现黄色闪烁,为此你需要添加为这个过渡添加一个一秒连续的动画来显示黄色(使用“to”属性来实现,一秒后变为黑色)。对于从“stop”到“go”状态的改变,我们期望保持颜色的直接改变,不使用过渡。在一个状态中,只需要描述属性如何从它们的默认状态改变(而不是前一个状态的改变)。状态通过它的状态名来鉴别,由组成它的一系列简单的属性来改变元素。就像在状态图中定义的一样,我们有一个“go”状态和一个“stop”状态,它们将会分别将交通灯改变为红色和绿色。原创 2023-05-01 22:42:13 · 1312 阅读 · 0 评论 -
QML模型视图代理简述
在QtQuick中,数据通过model-view(模型-视图)分离。对于每个view(视图),每个数据元素的可视化都分给一个代理(delegate)。QtQuick附带了一组预定义的模型与视图。想要使用这个系统,必须理解这些类,并且知道如何创建合适的代理来获得正确的显示和交互。原创 2023-05-01 22:52:42 · 400 阅读 · 0 评论 -
QML基础模型(Basic Model)
最基本的分离数据与显示的方法是使用Repeater元素。它被用于实例化一组元素项,并且很容易与一个用于填充用户界面的定位器相结合。原创 2023-05-01 23:06:00 · 707 阅读 · 0 评论 -
QML动态视图(Dynamic Views)
Repeater元素适合有限的静态数据,但是在真正使用时,模型通常更加复杂和庞大,我们需要一个更加智能的解决方案。QtQuick提供了ListView和GridView元素,这两个都是基于Flickable(可滑动)区域的元素,因此用户可以放入更大的数据。同时,它们限制了同时实例化的代理数量。对于一个大型的模型,这意味着在同一个场景下只会加载有限的元素。原创 2023-05-01 23:10:31 · 210 阅读 · 0 评论 -
QML旋转动画
动画被用于属性的改变。一个动画定义了属性值改变的曲线,将一个属性值变化从一个值过渡到另一个值。动画是由一连串的目标属性活动定义的,平缓的曲线算法能够引发一个定义时间内属性的持续变化。所有在QtQuick中的动画都由同一个计时器来控制,因此它们始终都保持同步,这也提高了动画的性能和显示效果。原创 2023-04-27 17:33:03 · 391 阅读 · 0 评论 -
QML通过键盘控制元素的移动与缩放
附加属性key允许你基于某个按键的点击来执行代码。例如使用up,down按键来移动一个方块,left,right按键来旋转一个元素,plus,minus按键来缩放一个元素。原创 2023-04-25 16:40:23 · 250 阅读 · 0 评论 -
QML实现键盘输入文本和编辑文本
使用QML实现文本的输入和文本的编辑。原创 2023-04-25 15:20:56 · 558 阅读 · 0 评论 -
QML布局元素
QML使用anchors(锚)对元素进行布局。anchoring(锚定)是基础元素对象的基本属性,可以被所有的可视化QML元素使用。一个anchors(锚)就像一个协议,并且比几何变化更加强大。Anchors(锚)是相对关系的表达式,你通常需要与其它元素搭配使用。原创 2023-04-25 13:45:12 · 730 阅读 · 0 评论 -
QML实现循环填满方格
使用QML实现循环填满方格的案例!原创 2023-04-08 21:28:31 · 515 阅读 · 0 评论 -
QML使用流对元素布局
本篇博客主要介绍QML使用流对元素布局!原创 2023-04-08 21:25:54 · 177 阅读 · 0 评论 -
QML对元素进行栅格布局
本篇博客主要介绍QML对元素进行栅格布局!原创 2023-04-08 21:23:58 · 214 阅读 · 0 评论 -
QML对元素行布局
本篇博客主要介绍QML对元素的行布局!原创 2023-04-08 21:18:59 · 253 阅读 · 0 评论 -
QML对元素进行移动、旋转、缩放
本篇博客主要示范QML中对元素的移动、缩放、旋转!原创 2023-04-08 21:15:54 · 1196 阅读 · 0 评论 -
QML基础
主要介绍QML基础!原创 2023-04-02 21:22:11 · 247 阅读 · 0 评论