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