QtQuick学习笔记(二)QML基本语法

QML是基于javascript的一种语言，在我看来，主要目的是让界面的开发更加的灵活和快捷。

作为动态语言，确实在这方面有优势。

一，创建对象

创建对象就是定义一个JSON。

比如：

Rectangle{
    id:rectangle
    width:100
    height:100
    color:"red"
}

这就是创建了一个长100像素，宽100像素， 颜色是红色的矩形，id是rectangle。

很简单吧。

其中

Rectangle就是类型名，id，width，height，color就是属性，如果是c++的话，就相当于：

Rectangle rectangle=new Rectangle();
rectangle.widht=100;
rectangle.height=100;
rectangle.color=QColor("red");

相比之下缺失简便不少。

细心的观众可能发现了，id就是用来识别每个对象的唯一标识，就可以等同于c++里的变量名。

所以，在qml中，可以直接使用id

比如：

rectangle.width=200

这就是把上面那个矩形的宽设为了200像素。

二，连接信号

连接信号可以说就是定义一个事件处理函数。

当然，在这应该叫方法更合适。

Rectangle{
    id:rectangle
    width:100
    height:100
    color:"red"
    onCompleted:{
        console.log("rect");
    }
}

这就是在rectangle的completed信号上加了一个叫onCompleted方法，然后方法里往控制台输出了一句话。

这个是不用写出来信号的名字的，因为qml会on后面的部分解析成信号的名字，并将他们连起来。

如果信号是有参数的，那么在处理函数里可以直接使用这个形参，名字和定义时 的一样，如：

Rectangle{
    id:rectangle
    width:100
    height:100
    color:"red"
    onCompleted:{
        console.log(arg1)//arg1是信号complete的参数
    }
}

如果是c++代码的话，应该是这样：

Rectangle rectangle=new Rectangle();
rectangle.widht=100;
rectangle.height=100;
rectangle.color=QColor("red");
connect(rectangle,completed,this,onCompleted);
...

void onCompleted(QObject arg1)
{
    console.log("rect");
}

三，对象嵌套

对象里是可以放对象的，这是非常方便的一点。

Rectangle{
    id:rectangle
    width:100
    height:100
    color:"red"
    
    Rectangle{
        id:inner
        width:50
        height:50
        color:"blue"
    }
}

这就是在红色的Rectangle里面又放了一个蓝色的小Rectangle。

四，引用

在本篇的最后，介绍一下qml怎么引用其他的库。

用的也是import声明

import QtQuick 2.0

上面就是引入了QtQuick的2.0版本的库。

注意：上面的代码都是运行不了的，只是为了解释语法。