QT开发(五十二)———QML语言

    QML是一种声明语言,用于描述程序界面。QML将用户界面分解成一块块小的元素,每一元素都由很多组件构成。QML定义了用户界面元素的外观和行为;更复杂的逻辑则可以结合JavaScript脚本实现。

一、QML基础语法

1Import语句

    QML代码中,import语句一般写在头几行,主要用途如下: 
    A、包含类型的全名空间
    B、包含QML代码文件的目录
    C、JavaScript代码文件

格式如下:

import Namespace VersionMajor.VersionMinor

import Namespace VersionMajor.VersionMinor as SingletonTypeIdentifier

import "directory"

import "file.js" as ScriptIdentifier

实例如下:

import QtQuick 2.0

import QtQuick.LocalStorage 2.0 as Database

import "../privateComponents"

import "somefile.js" as Script

2、对象声明

QML代码都定义一个对象树。所有的QtQuick元素都是继承于QQuickItem(QML中的Item类型),包括Rectangle、Text等。 对象类型以大写字母开头。
在定义对象的同时,对象的属性也会被赋初值。每个对象都可在其内部再声明子对象。每个对象的内容都由大括号包围。

Rectangle

{

    width: 100

    height: 100

    color: "red"

}

等价于:Rectangle { width: 100; height: 100; color: "red" }

3、子对象

    每个QML对象内可声明无限个子对象

import QtQuick 2.0

 

Rectangle

{

    width: 200

    height: 200

    color: "red"

    Text

    {

        anchors.centerIn: parent

        text: "Hello, QML!"

    }

}

4、注释

    QML的注释类似于C++、JavaJavasript等,有两种:

    A、单行注释时使用双斜杠//

    B、多行注释使用 /* … */

5、模块声明

    QML每个类都单独存放一个文件,每个文件都是一个模块,但不能单独声明一个函数,函数必须写在类内,或者用Javascript代码。
    引用时以模块名使用。如果不考虑C++扩展的话,所有的QML代码都是使用已有的QML元素类型完成的。

6、表达式

    表达式可以包含其它的对象与属性的引用,会建立约束关联

Item

{

     Text

     {

         id: text1

         x:2;y:2

         text: "Hello World"

     }

     Text

     {

         id: text2

         x:2;y:20

         text: text1.text

     }

 }

7、信号处理器

    信号处理器允许响应事件时处理动作。例如,MouseArea元素有信号处理器来处理鼠标按下,释放以及单击

MouseArea 

{

    acceptedButtons: Qt.LeftButton | Qt.RightButton

    onPressed: 

    {

        if (mouse.button == Qt.RightButton) 

            console.log("Right mouse button pressed")

    }   

}