Qt Quick 译06 – Qt Quick介绍1

概述

QML是一个高层次的脚本语言。它的命令，更准确的说是元素，调节了Qt库的威力和效率，使使用执行直观功能的命令（元素：译者注）变得很容易，例如，画一个矩形，在某个位置显示一张图片，等等。这些元素背后，是高效地实现这些动作的复杂的C++库。对于任何一个图形化的应用程序，始终都要考虑到，轻松创建一个图形化丰富的程序意味着需要特别注意避免性能问题。

 

QML语言也给予了这些命令更加大灵活性。要做到这一点，可以使用Javascript而不是C++来添加新的逻辑层到你的应用程序。Javascript比C++容易学，也可以将它嵌到QML文件中，或者从一个独立的文件中导入。

 

在QML中，各种不同的对象类型都被认为是元素。

 

一个元素通常拥有多种属性帮助定义这个元素。例如，如果我们创建一个叫Circle的元素，那这个圆的半径将是它的一个属性。

 

A First Look

一个元素的基本语法是：

SomeElement {
     id: myObject
     ... some other things here ...
 }

这里我们定义了一个新的对象。首先我们指定它的类型是SomeElement。然后在匹配的花括号里我们指定这个元素的各部分。

 

id是这个元素的唯一标识符，它必须以小写字母开头，并且只能包含字母、数字和下划线。它是这个特殊对象的名字。如果这个元素不是SomeElement，而是个许多Rectangle中的一个，这个可选的唯一id可以是我们单独地控制每一个元素。

 

每一个可视化的元素最终都基于，或者继承自叫Item的这个元素。Item有我们可能用到特定的属性和动作。所有属性都有缺省值，这样你只需要指定你需要的那些属性就可以。

 

拿一个简单的元素来说，比如一个Rectangle，它有一个id，我们命名为myRectangle，还有一个width和一个height。假设我们需要一个x方向是500 pixels，y方向是400 pixels （水平方向对垂直方向）的一个矩形。我们可以这样使用这些属性来实现它：

import QtQuick 1.0

 // This is a comment. And below myRectangle is defined.
 Rectangle {
     id: myRectangle
     width: 500
     height: 400
 }

这是一个有效的QML脚本。要运行它的话，拷贝粘贴到一个文件，叫myexample.qml吧，然后在命令行上运行下面的命令：

qmlviewer myexample.qml

 

在Mac OS X上，打开QMLViewer程序，而不是打开myexample.qml，或者从命令行运行：

QMLViewer.app/Contents/MacOS/QMLViewer myexample.qml

它会在它的窗口中生成一个非常单调的矩形。

 

Hello World!

现在我们可以增加一个颜色和文本制作一个QML版的Hello World程序。

 

Rectangle有一个color属性来画背景颜色。文本使用一个叫Text的元素来处理。我们需要在Rectangle里新建一个Text对象，设置它的text属性为“Hello World！”设置文本为“Hello world”和背景颜色是light gray：

import QtQuick 1.0

 Rectangle {
     id: myRectangle
     width: 500
     height: 400

     Text { text: "Hello World!" }

     color: "lightgray"
 }

Hello World Again

现在开始我们不会一直都显示import语句，但是当你创建你的QML脚本的时候它还要在那：

 

为了使我们的Hello world例子好看一点，可以设置文本的位置位于显示窗体的x=100，y=100处。这个位置属于Text元素，因为我们设置到它的定义中。注意，我们用分号将同一行中的不懂QML语句分开，或者可以简单的将每一个语句放在一行中。

Text {
         text: "<h2>Hello World</h2>"; color: "darkgreen"
         x: 100; y:100
     }

 

我们不仅重新定位了text，也添加了HTML标签改变了文本的字体大小。使用一个对应颜色的svg名字的标准字符串，文本颜色也从缺省的黑色改成了深绿色。

 

我们也可以使用颜色的RGB值的十六进制字符串，与在HTML中的类似。例如，带点绿色的蓝色是：

Text {
         text: "<h1>Hello world again</h1>"
         color: "#002288"
         x: 100; y: 100
     }

所有这些属性的改变都发生在Text对象中。其他对象可以使用这些信息，但是它属于定义属性的那个元素。

Images

使用Image元素，添加一个图片到我们的小程序中。一个Image使用一个图片文件的路径，它还有控制纵横比的属性，图片大小——与其他元素在一起时的覆盖区域。图片源，也就是文件的路径，是一个URL。因此，这个文件可以是本地的：mydir/myimage1.png。或者远程的http://www.example.com/images/myimage1.png。

Image {
         source: "images/qt-logo.svg"
     }

如我们所愿，这会在窗口的左上角显示这张图片。（图片）在默认坐标系的0，0位置。例子中使用了一个PNG文件，但它可以是各种支持的格式之一，包括JPG和GIF。

 

我们改一下图片的位置，并且放大它。将它放在和“Hello world again”文本相同的x偏移处，但是，比文本低50像素，并且使它的大小是150x150：

Image {
         source: "images/qt-logo.svg"
         x: 100; y: 150
         width: 150; height: 150
     }

将文字和图片加到Hello World例子中，我们可以写出一个看起来更好一点的简单的QML程序。

Rectangle {
     id: myRectangle
     width: 500
     height: 400

     Text {
         text: "<h1>Hello world again</h1>"
         color: "#002288"
         x: 100; y: 100
     }

     Image {
         source: "images/qt-logo.svg"
         x: 100; y: 150
         width: 150; height: 150
     }

     color: "lightgray"
 }

 

结果也依然非常简单：