友善啊，朋友的博客

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

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 //粒.

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 {

绘制矩形import QtQuick 2.9import QtQuick.Window 2.2Window{ visible: true width: 640 height: 480 Canvas { id: root width: parent.width; height: parent.height; onPaint://绘制事件 绘制要在绘制事件中完成 {

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" } .

相比于 Repeater 这样的放置有限的静态数据的元素，Qt提供了 ListView 和 GridView 元素，它们都继承自Flickable，可以放置更多数据。同时，它们限制了同时实例化的代理数量。 对于一个大型的模型，这意味着在同一个场景下只会加载有限的元素。ListView例1import QtQuick 2.9import QtQuick.Window 2.2Window{ visible: true width: 840 height: 600 .

模型和视图的概念比如要列出一个表中很多用户信息，可以使用一个垂直文本链表排列或者使用一个网格联系人图片排列。这两个案例中，数据都是相同的，但是可视化效果却是不同的。这种方法通常被称作 model-view（模型-视图） 模式。在这种模式中，数据通常被称作 model（ 模型） ，可视化处理称作 view（ 视图）。在QML中， model 与 view 都通过 delegate（ 代理） 连接起来。功能划分如下：model 提供数据。 显示在 view 中的每项数据，都是通过 delega

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.

例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 {

一、动画的概念动画描述了属性值改变的过程（曲线）。应注意不要过度地使用动画。用户界面动画的设计应该尽量小心，动画是让界面更加生动而不是充满整个界面。 眼睛对于移动的东西非常敏感，动画过多很容易干扰用户的使用。二、动画元素PropertyAnimation（ 属性动画）：使用属性值改变播放的动画 NumberAnimation（ 数字动画）：使用数字改变播放的动画 ColorAnimation（ 颜色动画）：使用颜色改变播放的动画 RotationAnimation（ 旋转动画）：使用旋

一、概念anchors是 Item 的基本属性。可以被所有的可视化QML元素使用。一个元素有6条锚定线：top bottom left right horizontalCenter verticalCenter在文本元素 Text 中有一条文本的锚定基线（baseline） 。每一条锚定线都有一个offset值，top、bottom、left、right 的锚定线中的它被称作边距。对于 horizontalCenter、verticalCenter、baseline被称作..

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") .

定义一个简单的组件：ClickableImage.qmlimport QtQuick 2.0Image{ id: root signal clicked MouseArea { anchors.fill: parent onClicked: root.clicked()//点击会让图片发信号 }}一个图片组件加上鼠标区域，定义一个信号当鼠标按下时发送此信号。main.qmlimport QtQuick 2

1、id 是一个特殊的属性值，它在一个QML文件中被用来引用元素。id 不是一 个字符串，而是一个标识符。一个 id 在一个QML文档中是 唯一的，并且不能被设置为其它值，也无法被查询（它的行为更像C++世界里 的指针）。2、一个属性能够设置一个值，这个值依赖于它的类型。如果没有对一个属性赋值，那么它将会被初始化为一个默认值。3. 一个属性能够依赖一个或多个其它的属性，这种操作称作属性绑定。当它依赖的属性改变时，它的值也会更新。4、添加自定义的属性需要使用 property 修饰符，然后跟上类型

一个旋转的风车示例：//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 {