QML 和QtQuick2

来源：https://www.devbean.net/2013/12/qt-study-road-2-qml-and-qtquick2/
从 Qt 4.7 开始，Qt 引入了一种声明式脚本语言，称为 QML（Qt Meta Language 或者 Qt Modeling Language），作为 C++ 语言的一种替代。而 Qt Quick 就是使用 QML 构建的一套类库。
QML 是一种基于 JavaScript 的声明式语言。
QML 文档描述了一个对象树。QML 元素包含了其构造块、图形元素（矩形、图片等）和行为（例如动画、切换等）。这些 QML 元素按照一定的嵌套关系构成复杂的组件，供用户交互。

Text {        id: label        x: 24; y: 100        text: "Space pressed: " + spacePresses + " times"        // 自定义属性，表示空格按下的次数        property int spacePresses: 0        // (1) 文本变化的响应函数        onTextChanged: console.log("text changed to:", text)        // 接收键盘事件，需要设置 focus 属性        focus: true        // (2) 调用 JavaScript 函数        Keys.onSpacePressed: {            increment()        }        // 按下 Esc 键清空文本        Keys.onEscapePressed: {            label.spacePresses = 0            text        }        // (3) 一个 JavaScript 函数        function increment() {            spacePresses = spacePresses + 1        }    }

QML 文档中可以定义 JavaScript 函数，语法同普通 JavaScript 函数一样。

QML 的绑定机制同 JavaScript 的赋值运算符有一定类似。它们都可以将后面的值赋值给前面。不同之处在于，绑定会在后面的值发生改变时，重新计算前面的值；但是赋值只是一次性的。

---

可视元素：Item、Rectangle、Text、Image和MouseArea。

Item是所有可视元素中最基本的一个。它是所有其它可视元素的父元素，可以说是所有其它可视元素都继承Item。Item本身没有任何绘制，它的作用是定义所有可视元素的通用属性：

分组 属性
几何： x和y用于定义元素左上角的坐标，width和height则定义了元素的范围。z定义了元素上下的层 叠关系。
布局： anchors（具有 left、right、top、bottom、vertical 和 horizontal center 等属性）用于定位元素相对于其它元素的margins的位置。
键盘处理： Key和KeyNavigation属性用于控制键盘；focus属性则用于启用键盘处理，也就是获取焦点。
变形： 提供scale和rotate变形以及更一般的针对 x、y、z 坐标值变换以及transformOrigin点的transform属性列表。
可视化： opacity属性用于控制透明度；visible属性用于控制显示/隐藏元素；clip属性用于剪切元素；smooth属性用于增强渲染质量。
状态定义： 提供一个由状态组成的列表states和当前状态state属性；同时还有一个transitions列表，用于设置状态切换时的动画效果。

Rectangle:

 Rectangle{        width: root.width        height: root.height        gradient: Gradient{            GradientStop { position: 0.0; color: "red" }            GradientStop { position: 0.33; color: "yellow" }            GradientStop { position: 1.0; color: "green" }        }        border{            color: "blue"            width: 4        }        radius: 8    }

Text元素
horizontalAlignment和verticalAlignment属性指定对齐方式。
增强文本渲染，style和styleColor两个属性。这两个属性允许我们指定文本的显示样式和这些样式的颜色。
在文本使用 … ，elide属性。
文本自动换行,wrapMode

 Text {        width: 160        height: 120        text: "A very very long text"        //文本末尾使用 … ，**elide属性**        elide: Text.ElideRight        //文本自动换行        wrapMode:Text.Wrap        //设置行高        lineHeight:1        style: Text.Sunken        styleColor: '#FF4444'        verticalAlignment: Text.AlignTop        font {            pixelSize: 24        }    }

wrapMode:Text.Wrap:

wrapMode:Text.WrapAnywhere

Image属性

Image {        x: 112;        y: 12        width: 48        height: 118/2        //本地路径（./images/home.png），也可以使网络路径（http://example.org/home.png）        source: "image/file2.png"        //fillMode设置改变大小的行文  Image.PreserveAspectCrop等比例切割        fillMode: Image.PreserveAspectCrop        //同时设置clip属性，避免所要渲染的对象超出元素范围。        clip: true    }

MouseArea:
不可见的矩形区域。通常，我们会将这个元素与一个可视元素结合起来使用，以便这个可视元素能够与用户交互。

Rectangle {    id: rect1    x: 12;    y: 12    width: 76;    height: 96    color: "lightsteelblue"    MouseArea {        /* ~~ */    }}

图片旋转 事件:

Image {        id: wheel        anchors.centerIn: parent        source: "qrc:/images/wheel.png"        Behavior on rotation {            //旋转事件            NumberAnimation{                duration: 5000            }        }    }    MouseArea{        width: wheel.width        height: wheel.height        anchors.centerIn: parent        onClicked: {            wheel.rotation = 360        }    }