QML-笔记（一）

目的：

作此笔记是为了让自己能更好的了解QML，能更快的入手QML Application。

什么是QML？

QML（Qt modeling language）是一种描述性的脚本语言，文件格式以.qml结尾。语法格式非常像CSS，但又支持javascript形式的编程控制。它是一个高度可读的，声明式的，类似JSON语法的为用户提供接口规范和编程语言。它允许开发者和设计者创建高性能的，流畅的动画和视觉效果的应用。 Qt Quick 就是使用 QML 构建的一套类库。

特点

1. 声明式、高度可读的脚本语言
2. 组件（文件）可以以动态方式连接、加载
3. 复用性强，定制创建自己的用户界面
4. 将C++、JavaScript结合
5. 能实现复杂的动画、粒子等效果渲染
6. 对象结构层次明显

QML声明结构

item
{
id —— 命名

property declarations —— 属性声明

signal declarations —— 信号声明

JavaScript functions —— JavaScript函数

object properties —— 对象属性

child objects —— 子对象

states —— 状态

transitions —— 转换
}
//eg
Rectangle
{
id: photo // id on the first line makes it easy to find anobject
property bool thumbnail: false // property declarations
property alias image: photoImage.source

signal clicked                                                  // signal declarations

function doSomething(x)                                 // javascript functions
{
    return x + photoImage.width
}

color: "gray"                                           // object properties
x: 20; y: 20; height: 150                               // try to group related properties together
width: {                                                // large bindings
    if (photoImage.width > 200) {
        photoImage.width;
    } else {
        200;
    }
}

Rectangle {                                             // child objects
    id: border
    anchors.centerIn: parent; color: "white"

    Image { id: photoImage; anchors.centerIn: parent }
}

states: State {                                         // states
    name: "selected"
    PropertyChanges { target: border; color: "red" }
}

transitions: Transition {                               // transitions
    from: ""; to: "selected"
    ColorAnimation { target: border; duration: 200 }
}

}
后期如果用到更复杂的结构如粒子，动画，信号等的实现，会接着一一叙述出来
参考这位大神网址：https://blog.csdn.net/cloud_castle/article/details/28412867