使用Qt Quick创建你的塞班手机程序(二)

本文主要讲解基本的QML语法，教会你做一个能听你指挥的界面，涉及少量的JS，但不影响不会JS的同学的学习。

QML是Qt Quick特有的一个编程语言，专门用于界面的编写，属于描述性语言，对于CSS熟悉的同学可能对于QML的语法很熟悉。同时QML直接支持Javascript内嵌和外联，不过和当前Web技术里面使用的Javascript有些许的差别，编写的时候注意查阅相关的文档。

QML里面最重要的东西是元素，查阅Qt Creator自带文档的方法是点击左侧的帮助，在索引里面填入 qt quick就可以看到很多了。

基础元素有：

• Item
• Rectangle
• Image
• Text
• TextInput
• TextEdit
• FocusScope
• Component
• MouseArea

切记QML里面所有的元素都是开头大写的，其余任何东西基本都是小写开头

Item是一个基础元素，很多元素都是从这个东西继承过来的，比较通俗的讲就是一个模具的效果。

Rectangle将会是你用的最多的一个元素，顾名思义可以创建一个矩形区域。

Image用于图片的显示，当然还有其他方法显示图片。

Text是文本元素，用来显示文本或者超文本（HTML）。

TextInput是输入区域。

TextEdit是文本编辑区域。

FocusScope暂且不提。

Component是组件的意思。

MouseArea也是用的很多的，是鼠标操作区域，这个元素将处理所有鼠标操作。

以上只需要了解就行，下面用实机代码进行讲解，就拿最开始创建项目的时候出现的一个唯一的main.qml文件来说，这个文件是整个程序里面唯一的界面文件，同时也是程序开始的时候载入的界面，让我们来看看他是如何写出一个helloworld的：

// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1

Rectangle {
    width: 360
    height: 360
    Text {
        text: qsTr("Hello World")
        anchors.centerIn: parent
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }
}

首先了解一下这个语言结构，当我们要创建一个矩形的时候我们是这么写的：

Rectangle
{
//这里是矩形内部
}

如果我们想在矩形里面再加个矩形的话就是这样：

Rectangle
{
    //这里是矩形1内部
    Rectangle
    {
        //这里是矩形2内部
    }
}

注意一个QML文件的根元素也就是最外面的元素只能有一个，如果一个QML是下面这么写的那么会报错：

//错误写法
Rectangle
{
}

Rectangle
{
}

那么有人会说我创建的矩形怎么知道他放在哪里了呢？

这个时候就要写一个元素的一些属性，每个元素都有一些属性，详细的列表说明请自己查阅帮助文档。

比如x代表x坐标，y代表y坐标，height代表高度，width代表宽度。

Rectangle
{
    x:100
    y:100
    height:100
    width:100
}

上述代码代表我创建了一个在屏幕坐标(100,100)宽高都是100像素的矩形。属性冒号后面是属性的值。

再回到示例代码：

        很明显最外层是一个宽高都是360像素的矩形。没有制定x和y的时候x和y都是0，这里的矩形属于所有界面最外层，所以默认是填完屏幕，不管宽高怎么写的。虽然说是这样，但是制定大小位置永远是好习惯（自适应除外）。

        然后里面看到一个内嵌的Text元素，这个元素有个text属性，这个属性代表的是Text元素所显示的文本，我们可以看到helloworld就在里面。但是为什么外面有个qsTr（）在？因为Qt考虑了软件国际化的标准，也就是使用不同语言的时候界面文字可以切换，这些用qsTr抱住的就是可以被转换的文字，当然你如果不想要这个功能完全可以去掉。另外这个功能可能会引起中文乱码，具体我不知道解决方法。

        然后第二个元素是anchors，这个代表一个元素的布局，基本上可视化元素都有这个属性，写完anchors然后输入小数点的时候可以看到有哪些可以设置的属性，这里他设置的是centerIn，很明显说的是居中，这里居中是上下左右都居中。那么对谁居中呢，答案就是冒号后面的值，这个值可以是元素的id属性，也可以是parent这种相对的指向。parent是指父元素，也就是说这个元素的外面一层元素。id属性后面再说。也就是说这个Text元素显示出来的文本就是居中于Rectangle。这样一个Helloworld就出现了，你可以点击左侧的设计。可以看到界面预览，但是切记：界面预览绝对不代表最后的结果，很多东西在设计里面，在手机上和在虚拟机上全都不相同。设计只能给你一个不是最终结果的定型。

        那么代码如何做到点击屏幕就退出的效果呢？

        就是和Text并列 的MouseArea元素，这个元素是内嵌在Rectangle里面的。前面说了这个MouseArea是负责处理鼠标操作的，换言之在手机上就是触摸屏的操作。它先设置了anchors.fill属性，这个属性代表当前元素将会充满那个元素。这里给的值是parent也就是它的父元素Rectangle，代表Rectangle的所有区域它都管着。前面说到Rectangle会填满屏幕（其他情况下是按照设置的位置大小来的），那么说它响应整个屏幕的触摸屏操作。然后还有一个是onClicked,这个不是属性，是信号（Signals），信号代表某个事情发生后会激发他冒号后面的操作，这里onClicked是代表点击的效果，也就是说点击之后会执行这个东西冒号后面写的，如果你需要执行多条操作请用大括号包括起来。示例代码里面虽然只有Qt.quit();zhe这么一行操作也用大括号括起来是一个好习惯。这里后面的分号可有可无，每句后面如果写上分号可以吧操作写在一行，同时这个分号结尾也是绝大多数高级语言的约定，学过C++的话你懂的。如果不写分号也可以，但是需要每句都转行。这个操作可以是很多东西，示例所使用的是调用库函数退出应用程序，当然你可以写成其他的，比如改变文本属性，这个后面再说。

到这里就分析完示例代码是怎么工作的了，下面我们来稍作修改来达到一些其他的常用功能：

// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1

Rectangle {
    width: 360
    height: 360
    Text {
        id:id_text
        text: qsTr("Hello World")
        anchors.centerIn: parent
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            id_text.text="clicked";
        }
    }
}

对比上面的示例代码，这份代码改动了两个地方：

1. Text元素后面多了一个id属性
2. MouseArea的onClicked所执行的方法改动了。

首先说明一下id，这个id也是一个属性，相当于给一个元素标上一个名字。这个是非常有用的，比如MouseArea里面onClicked要改动Text显示的文字，那么首先是要找到Text，这个时候使用parent就不行了，就需要借助id，这里我们给Text的id命名为id_text，注意小写开头，需要改变id代表的元素的某个属性则这么写：

id.属性名称=属性值。

如代码所示这里赋值不再是冒号而是等于号了。这里是改变Text的text属性，也就是改变了显示的文字，效果大家可以自己运行一下，可以看到点击屏幕之后字样变了。这就是改变QML元素属性的方法，也是用的非常非频繁的。

以下内容涉及javascript

如果你会使用js，那么onclicked后面的操作可以是js语句。

另外，属性的赋值也可以使用js进行分配，比如

Rectangle
{
    x:{
        if(条件)
            return 0;
        else
            return 1;
    }
}

这样可以根据条件选择性的赋值属性。

好了以上就是最基础的QML操作和元素介绍，更多的元素及其属性的说明请千万学会查阅自带的帮助文档。