Qt Quick 针对 C++开发者入门

今天的消费者与企业用户都是很难搞定的。他们是看游戏与电影里炫丽的用户界面长大的；那些中规中矩的界面不再是卖点了。视觉上的冲击力才是今天的卖点。现在的消费者可以用上强大的笔记本电脑、机顶盒或移动设备。

这需要设计师与开发人员脱颖而出，Qt Quick 是建立在今天产品团队的工作方式。核心逻辑代码是由开发者进行性能优化；界面则由设计师使用可视化工具完成，这样大家可以分工完成。

Qt Quck 的快速性能，是因为它提供了 Qt 应用程序与用户界面框架的构建。Qt 框架是运行性能高，占内存小；非常适合开发移动、嵌入式与上网本的应用程序。

Qt Quck 的扩展是使用 QML 的 Qt 框架，一个描述性语言代码，非常适合设计师编写代码。一个故事板画面是被声明为元素树的一个分支；每个画面的可视比率被声明为分支上元素的属性；在画面间过渡是可以用各种效果的动画。

Qt Quck 包括 Qt Creator 工具，一个集成开发环境；包括界面与代码编写。设计师是工作在可视环境里，开发者工作完全特性的

Qt Quic 概况

Qt Quick 是由 QML 语言、QtDeclarative C++模块（整合了 C++对象的 QML 语言）以及现在支持 QML 环境的 Qt Creator 工具组成。Qt Quick 帮助开发者与设计师合作来构建流畅的用户界面，可以为便携式消费设备（如：移动电话、媒体播放器、机顶盒以及上网本）开发炫的应用程序。使用QtDeclarative C++模块，你可以从 Qt 应用程序载入 QML 文件进行互动。

QML 提供机制来使用 QML 元素声明构建一个对象树。QML 提高了 JavaScript 与基于 Qt 已存在的 QObject 类型系统间的整合，增加了自动属性绑定的支持并提供了语言层次的网络透明度。

QML 元素是一套先进的图形与行为构建块的集合。这些不同的元素组合在一起，在 QML 文件里从简单的按钮与滑块到复杂完整的网络功能的应用程序，类似于 Flickr 图片浏览器。

Qt Quick 是建立于 Qt 固有优势上。QML 可以用于逐步扩展已有的应用程序或构建全新的应用程序。由 C++通过 QtDeclarative 模块来完全扩展 QML 的功能。

QML 简介

QML 是一个丰富的语言，高效的逻辑由 C++完成，高动态用户界面由 QML 完成。QML 完全处理可以通过官方的在线文档获取。

理解 QML，先得从元素概念开始。一个元素是 QML 程序的基本组成部分。QML 支持如Rectangle 与 Text 类型的可视元素，MouseArea 与 Flipable 类型的交互式元素，RotationAnimation 与 Transition 类型的动画元素。也有复杂的元素类型，允许开发人员处理数据，实现以模型视图架构来显示数据，还有其它内部元素类，这里只是补充一下。

所有的 QML 元素包括一个或更多的属性（例如：颜色）；可以由开发人员控制。许多元素包含信号（例如 onClicked），可用于对事件作出反应或状态变化。

可视元素：你好世界

这个例子是必须要了解的。在这里的代码是要求在一个简单背景的矩形框的顶部放置 Hello World文本。

Rectangle {
    width: 300
    height: 200
    Text {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        text: "Hello World"
    }
}

让我们剖析这个简单的代码。这个 Hello World 例子是一个 QML 文件，这意味着它是一个完整的QML 代码。是可以运行的，QML 文档一般是硬盘上的纯文本文件或网络资源，也可以是直接构建的文本数据。

QML 文档总是有一个或多个导入语句。在这里你看到 Qt 4.7 的导入。为了避免后继版本引入的元素影响现在的 QML 文档，文档内只用导入 QML 模块里有效的元素类型。这也就说 QML 是一个版本化的语言。

接下来，你看到的 Rectangle 元素模板用于创建一个活动对象。对象是可以包含其它的对象，建立父子关系。在上述代码中 Rectangle 对象是 Text 对象的父级对象。Rectangle 元素还定义了用于管理全用户界面的可视边框与焦点分割的顶级窗口。

技术说明：QML 元素的子级属性包含该元素所有可视子级的列表，资源属性包含所有非可视对象的列表。这两个列表都是默认隐性的填充，或者你可以明确指定它们。第三个属性，数据是一个列表包含了整个子级或资源列表中的对象。你可能没有明确填充该数据属性；如果你需要遍历可视与非可视对象的列表是非常有用的，所以你可以这样写：

Item {
    Text {}
    Rectangle {}
    Timer {}
}
代替：
Item {
    children: [ //default property and implicitly assigned
        Text {},
        Rectangle {}
    ]
    resources: [ //default property and implicitly assigned
        Timer {}
    ]
}

在对象里，属性是使用 property 绑定值的：表达式语句。在这里有两个方面：

首先，表达式是一个 JavaScript 表达式，这意味着你可以基于一个计算、一个条件或其它复杂的JavaScript 操作来设置属性。例如：你可以基于一个变量定向值来设置该矩形的长宽比。

其次，是绑定不同的赋值语句。对于一个赋值语句中属性的值是赋值语句执行来设置的。对于绑定一个属性是绑定语句第一次执行来设置；但会改变，如果表达式的结果用于设置属性改变。（如果需要，你可以指定一个值到属性，使用 JavaScrip 语法属性 = 表达式）。

当方向变化（从纵向到横向，有些移动设备有传感器）时要考虑会发生什么。因为属性绑定，父级矩形的长宽比将改变并且文本元素会生变化，重新定位在矩形的中心。

技术说明：属性绑定是由一个 NOTIFY 信号在 Qt C++里使用 Q

PROPERTY

(

)

宏声明的对象来实现的。如果你不知道这是什么意思，不要担心。如果你计划纯粹使用 QML 构建应用

anchors.horizontalCenter: parent.horizontalCenter 语句文本元素的中心对齐父级矩形的中心。Anchors 提供了一种通过指定父级或同级项目的关系来定位该项目。（注意：如果通过在线文档查看 Rectangle 元素你将不会看到 anchors.horizontalCenter 属性。因为 Rectangle 元素继承了QML 项目元素的属性；Item 元素提供了 anchors.horizontalCenter 属性。）

图层化可视元素

QML 可视元素可以被分层在其它元素的顶部，使用 opacity :real（在这里实数型从０（透明）到１（不透明）来控制透明度来显示下面的元素。出于性能的考虑，这应该谨慎使用，特别是在场景中的需要动画每个图层；这将在运行时动画每帧都需要被渲染；会大大降低性能，因此在最终部署之前，最好为尽可能多的场景做预渲染；然后在运行时只需要简单的载入像素。

下图两个位移与重叠的矩形，一红一蓝，都具有透明性；在重叠的区域将会产生紫色。请注意子级矩形（蓝色）继承父级（红色）矩形的５０％透明度。

技术说明：继承元素总是继承它们基元素属性；即，一个矩形是一个项目；所以项目里的所有属性全都在矩形元素里出现。

互动元素：鼠标与触摸

要添加鼠标与触摸互动，你需要添加一个 MouseArea 对象。MouseArea 对象让你使用鼠标的单击与拖动（或触摸点）。其它有效的互动元素包含：Flickable、Flipable 与 FocusScope。

请注意 MouseArea 对象可以从任何视觉对象分离，提供设计师的灵活性。例如：为了创建一个用于用户单击可视按钮，它围绕该按钮可视面积更大的鼠标区域允许用户来丢失几个像素的可视元素。

我们使用 Hello World 范例来介绍鼠标区域，该矩形包含一个子级文本，一个新的矩形子级用来定义为鼠标区域。

Rectangle {
    width: 320;
    height: 240;
    color: "#C0C0C0";

    Text {
        id: coloredText;
        anchors.horizontalCenter: parent.horizontalCenter;
        anchors.top: parent.top;
        anchors.topMargin: 4;
        text: "Hello World!";
        font.pixelSize: 32;
    }

    Component {
        id: colorComponent;
        Rectangle {
            id: colorPicker;
            width: 50;
            height: 30;
            signal colorPicked(color clr);
            MouseArea {
                anchors.fill: parent
                onPressed: colorPicker.colorPicked(colorPicker.color);
            }
        }
    }

    Loader{
        id: redLoader;
        anchors.left: parent.left;
        anchors.leftMargin: 4;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 4;
        sourceComponent: colorComponent;
        onLoaded:{
            item.color = "red";
        }
    }

    Loader{
        id: blueLoader;
        anchors.left: redLoader.right;
        anchors.leftMargin: 4;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 4;
        sourceComponent: colorComponent;
        onLoaded:{
            item.color = "blue";
        }
    }

    Connections {
        target: redLoader.item;
        onColorPicked:{
            coloredText.color = clr;
        }
    }

    Connections {
        target: blueLoader.item;
        onColorPicked:{
            coloredText.color = clr;
        }
    }
}

MouseArea 元素包含信号处理，允许你编写 JavaScript 表达式将被特定的事件调用或状态的改变。有效的事件处理包括 onClicked、onEntered、onPressed 以及 onReleased。在上面的范例中，onClicked 信号处理用来切换矩形的颜色。

这个例子是矩形响应任何有效的单击来改变颜色。单击一般是在 MouseArea 里按下然后释放的动作（按下、移出 MouseArea 外；然后移回来并释放鼠标按钮同样也称为单击）。该处理的完整语法是MouseArea::onClicked (mouse) ，在这里的 mouse 参数提供了关于单击的信息，包括单击释放鼠标的 x 与 y 位置以及单击是否被保持。在我们的例子里并不注意在哪里进行单击。

鼠标触摸互动的范例展示了一个通过响应一个事件改变一个值可视化状态的简单情况。如果你是尝试响应多个状态改变多个值 onClicked 描述将是非常糟糕的。

状态声明

QML 状态声明定义一个属性值由基本状态的改变。基本状态是属性值的初始化声明并且是使用一个空字符串作为状态名称表示。状态改变后你可以总是可以通过指定一个空字符串到 state 属性来恢复到基本状态。

在下面的例子中，状态有两个颜色。在红色矩形的定义中，id 属性是设置的。命名的对象可以被同级或子级引用。两种状态是：红色与橙色。state 属性是指定该元素为初化状态。

状态元素包含包含了一个条件用于决定。在这里当在 MouseArea 按下时，你可以看见红色状态被应用。

Rectangle {
    color: "#ff0000"
           width: 310
    height: 210
    MouseArea {
        anchors.fill: parent
        onClicked: {
            if (parent.color == "#ff0000") {
                parent.color = "#ff9900";
            } else {
                parent.color = "#ff0000";
            }
        }
    }
    Rectangle {
        width: 300
        height: 200
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        Text {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            text: "Hello World"
        }
    }
}

定义的状态不仅仅只是设置每个状态的颜色；还可以设置矩形的高宽度。橙色状态提供一个大的按钮。为了利用这个状态，鼠标区域的 onClicked JavaScript 是被更新。

它可以使用代码定义状态集，像这个例子中或使用图像化的 Qt Creator 里 Qt Quick Desinger 组件。

要建立状态间的动画，就要 Transition 元素。Transition 元素可使用从基本状态到目标状态使用动画元素插值属性的改变。动画元素可以使用不同参数值曲线与群组技术，给予开发者与设计者在状态过渡期间高度控制属性改变。这在稍后有详细的说明。

id: buttonRect;
state: "red"
       states: [
           State {
               name: "red"
                     when: mouseArea.pressed == true
               PropertyChanges {
                   target: buttonRect;
                   color: "red";
                   width: 80; height: 40
               },
           }
           State {
               name: "orange"
                     when: mouseArea.pressed == false
               PropertyChanges {
                   target: buttonRect;
                   color: "#ff9900";
                   width: 120; height: 80
               }
           }
       ]

QML 组件

在 Hello World 例子中讨论描述了一个 QML 文档内容。QML 文档命名也是很重要的。QML 文件名称必须是以大写字母开头。QML 组件是 QML 运行时使用一些预定义行为创建一个对象的模板。由于它是一个模板，单个 QML 组件可以被运行多次来生成几个对象，每个对象都是组件的实例。

一旦创建后，实例是不依赖该组件的，这样它们可以各自独立操作数据。在这里有一个简单按钮组件的例子（在一个 Button.qml 文件里定义），它在 Application.qml 里实例化四次。每个实例是使用不同的 text 属性值来创建的。

MouseArea {
    anchors.fill: parent
    onClicked: {
        if (parent.state == "red") {
            parent.state = "orange"
        } else {
            parent.state = "red";
        }
    }
}

Rectangle {
    property alias text: textItem.text
    width: 100; height: 30
    border.width: 1
    radius: 5
    smooth: true
    gradient: Gradient
    GradientStop {
        GradientStop {
            GradientStop {
                position: 0.0; color: "darkGray"
            }
            position: 0.5; color: "black"
        }
        position: 1.0; color: "darkGray"
    }
    Text {
        id: textItem
        anchors.centerIn: parent
        font.pointSize: 20
        color: "white"
    }
}

动画元素：流畅过渡

动画效果的关键是流畅的用户界面。在 QML 里，通过应用对象到对象动画属性值，随着时间的推移来逐渐的改变它们来制作动画。动画对象是由内置的动画元素制作的，它可用来制作不同类型属性值的动画，此外动画对象可以以不同方式应用中，这取决于它们上下文不同的内容。

在线联机文档中关于 QML 动画有着更详细的信息。这里只是一个介绍而已。

下例代码显示一个矩形运动的动画。创建带有两种状态的矩形（默认状态与附加的移动状态）。在移动状态里，矩形的位置改变为（50，50）。变换对象是指矩形在默认状态与移动状态间的过渡，任何 x与 y 属性的改变将被动画，使用 Easing.InOutQuad。

Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"
    states: State {
        name: "moved"
        PropertyChanges { target: rect; x: 50; y: 50 }
    }
    transitions: Transition {
        PropertyAnimation {
            properties: "x,y";
            easing.type: Easing.InOutQuad
        }
    }
}

QML 里的模型─视图模式

在模型─视图里使用 QML 设计模式是非常自然的。QML 可以创建流行、悦目的方式来显示数据模型，这些模型是可以以 C++或直接用 QML 实现的。

QML 目前只提供了用于三个元素来显示模型的视图。ListView 与 GridView 元素创建列表与网格视图显示。PathView 元素勾画出一个路径来显示模型，例如循环路径允许你列表项目循环流动传送。

让我们对同一模型创建两个不同的视图──一个基本的联系人列表。

你可以使用ListModel  元素直接在 QML 里构建模型。下例中显示了如何创建一个联系人模型，其中每个联系人记录包括了姓名、电话号码以及相片。每个元素在列表是通过 ListElement 元素定义的，每条项目都包含两个数据

ListModel {
    ListElement {
        name: "Bill Jones"
        number: "[phone]"
        icon: "pics/qtlogo.png"
    }
    ListElement {
        name: "Jane Doe"
        number: "[phone]"
        icon: "pics/qtlogo.png"
    }
    ListElement {
        name: "John Smith"
        number: "[phone]"
        icon: "pics/qtlogo.png"
    }
}

技术说明：当使用 C++模型时，名称用来指向模型的不同角色