![](https://img-blog.csdnimg.cn/20210926134926588.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
《QmlBook》笔记
友善啊,朋友
这个作者很懒,什么都没留下…
展开
-
《QmlBook》笔记(15):粒子组实现烟花爆炸效果
Tracer.qmlimport QtQuick 2.9 Item{ id: root anchors.fill: parent anchors.margins: 1 property color color: 'red' Rectangle { anchors.fill: parent color: 'transparent' border.color: root.color border.width: 2 opa原创 2021-10-27 17:46:10 · 559 阅读 · 0 评论 -
《QmlBook》笔记(14):粒子系统示例
import QtQuick 2.9import QtQuick.Window 2.2import QtQuick.Particles 2.0Window{ visible: true width: 1000; height: 800 Rectangle { id: root; anchors.fill: parent color: "#1f1f1f" ParticleSystem //粒.原创 2021-10-27 17:23:40 · 315 阅读 · 0 评论 -
《QmlBook》笔记(13):简单绘图板
ColorSquare.qmlimport QtQuick 2.0Rectangle{ id: colorSquare; width: 48; height: 48 color: "green" signal clicked property bool active: false border.color: active? "#666666" : "#f0f0f0" border.width: 2 MouseArea {原创 2021-10-25 00:02:58 · 201 阅读 · 0 评论 -
《QmlBook》笔记(12):画布元素
绘制矩形import QtQuick 2.9import QtQuick.Window 2.2Window{ visible: true width: 640 height: 480 Canvas { id: root width: parent.width; height: parent.height; onPaint://绘制事件 绘制要在绘制事件中完成 {原创 2021-10-24 23:51:06 · 228 阅读 · 0 评论 -
《QmlBook》笔记(11):状态可变化的代理示例
import QtQuick 2.9import QtQuick.Window 2.2Window{ visible: true width: 480; height: 700; Rectangle { anchors.fill: parent gradient: Gradient { GradientStop { position: 0.0; color: "#4a4a4a" } .原创 2021-10-18 13:35:28 · 136 阅读 · 0 评论 -
《QmlBook》笔记(10):动态视图示例
相比于 Repeater 这样的放置有限的静态数据的元素,Qt提供了 ListView 和 GridView 元素,它们都继承自Flickable,可以放置更多数据。同时,它们限制了同时实例化的代理数量。 对于一个大型的模型,这意味着在同一个场景下只会加载有限的元素。ListView例1import QtQuick 2.9import QtQuick.Window 2.2Window{ visible: true width: 840 height: 600 .原创 2021-10-08 00:34:00 · 355 阅读 · 0 评论 -
《QmlBook》笔记(9):模型-视图-代理的概念、Repeater示例
模型和视图的概念比如要列出一个表中很多用户信息,可以使用一个垂直文本链表排列或者使用一个网格联系人图片排列。这两个案例中,数据都是相同的,但是可视化效果却是不同的。这种方法通常被称作 model-view(模型-视图) 模式。在这种模式中,数据通常被称作 model( 模型) ,可视化处理称作 view( 视图)。在QML中, model 与 view 都通过 delegate( 代理) 连接起来。功能划分如下:model 提供数据。 显示在 view 中的每项数据,都是通过 delega原创 2021-10-07 21:49:08 · 253 阅读 · 0 评论 -
《QmlBook》笔记(8):状态和过渡示例
import QtQuick 2.9import QtQuick.Window 2.2Window{ visible: true width: 1640 height: 880 Rectangle { id:inner_rect width:parent.width height: parent.height state: "stop"//inner_rect的默认状态 stat.原创 2021-10-04 14:52:10 · 147 阅读 · 0 评论 -
《QmlBook》笔记(7):动画示例
例1:同时设置多个属性动画import QtQuick 2.9import QtQuick.Window 2.2Window{ id:win visible: true width: img_bg.width height: img_bg.height Image { id:img_bg; source: "qrc:/img/background.png"//背景 Image {原创 2021-10-04 14:23:08 · 308 阅读 · 0 评论 -
《QmlBook》笔记(6):动画相关概念
一、动画的概念动画描述了属性值改变的过程(曲线)。应注意不要过度地使用动画。用户界面动画的设计应该尽量小心,动画是让界面更加生动而不是充满整个界面。 眼睛对于移动的东西非常敏感,动画过多很容易干扰用户的使用。二、动画元素PropertyAnimation( 属性动画):使用属性值改变播放的动画 NumberAnimation( 数字动画):使用数字改变播放的动画 ColorAnimation( 颜色动画):使用颜色改变播放的动画 RotationAnimation( 旋转动画):使用旋原创 2021-10-04 09:46:48 · 194 阅读 · 0 评论 -
《QmlBook》笔记(5):锚
一、概念anchors是 Item 的基本属性。可以被所有的可视化QML元素使用。一个元素有6条锚定线:top bottom left right horizontalCenter verticalCenter在文本元素 Text 中有一条文本的锚定基线(baseline) 。每一条锚定线都有一个offset值,top、bottom、left、right 的锚定线中的它被称作边距。对于 horizontalCenter、verticalCenter、baseline被称作..原创 2021-10-01 21:57:13 · 370 阅读 · 0 评论 -
《QmlBook》笔记(4):定位元素示例
RedSquare.qmlimport QtQuick 2.0Rectangle{ width: 48 height: 48 color: "#ea7025" border.color: Qt.lighter(color)}1、列定位器ColumnWindow{ id:root visible: true width: 640 height: 480 title: qsTr("Hello World") .原创 2021-09-30 12:37:20 · 145 阅读 · 0 评论 -
《QmlBook》笔记(3):简单转换
定义一个简单的组件:ClickableImage.qmlimport QtQuick 2.0Image{ id: root signal clicked MouseArea { anchors.fill: parent onClicked: root.clicked()//点击会让图片发信号 }}一个图片组件加上鼠标区域,定义一个信号当鼠标按下时发送此信号。main.qmlimport QtQuick 2原创 2021-09-29 22:36:41 · 204 阅读 · 0 评论 -
《QmlBook》笔记(2):元素属性的知识点
1、id 是一个特殊的属性值,它在一个QML文件中被用来引用元素。id 不是一 个字符串,而是一个标识符。一个 id 在一个QML文档中是 唯一的,并且不能被设置为其它值,也无法被查询(它的行为更像C++世界里 的指针)。2、一个属性能够设置一个值,这个值依赖于它的类型。如果没有对一个属性赋值,那么它将会被初始化为一个默认值。3. 一个属性能够依赖一个或多个其它的属性,这种操作称作属性绑定。当它依赖的属性改变时,它的值也会更新。4、添加自定义的属性需要使用 property 修饰符,然后跟上类型原创 2021-09-26 15:36:15 · 188 阅读 · 0 评论 -
《QmlBook》笔记(1):一个简单的qml程序
一个旋转的风车示例://main.qmlimport QtQuick 2.0import QtQuick.Window 2.0Window{ id:root; visible: true; width: bg.width; height: bg.height; Image { id: bg source: "img/bg.png";//白色背景图片 } Image {原创 2021-09-26 14:49:48 · 516 阅读 · 0 评论