QML 语法（Syntax）

简介

QML（Qt Markup  Language:Qt 标记语言）是一种描述用户界面的声明式语言。它将用户界面分解成一些更小的元素，这些元素能够结合成一个组件（Component）。QML语言描述了用户界面元素的形状和行为。用户界面能够使用JavaScript来提供修饰，或者增加更加复杂的逻辑。从这个角度来看它遵循HTML-JavaScript模式，但QML是被设计用来描述用户界面的，而不是文本文档。

从QML元素的层次结构来理解是最简单的学习方式。子元素从父元素上继承了坐标系统，它的x,y坐标总是相对于它的父元素坐标系统。

实例代码

下面是一个简单的qml文件：

import QtQuick 2.0


//根元素是 Rectangle
Rectangle {
    //命名这个元素为：root
    id: root;

    //属性：<属性名>：<属性值>
    width: view.width; height: view.height;
    color: "#d8d8d8";

    //声明一个内嵌的元素（root的子元素）
    Image {
        id : view
        source: 'image/view.jpg'
    }

    //另一个内嵌的元素
    Text {
        //未命名的元素

        //参照parent
        x: parent.width/2-width; y: 25;
        horizontalAlignment: Text.AlignHCenter;
        text: '风景图';
        color: "#fff";
        font.pixelSize: 35;
    }
}

解读代码

*import声明导入了一个指定的模块版本。一般来说会导入QtQuick2.0 来作为初始元素的引用。

*使用//可以单行注释，使用/**/可以多行注释，就像C/C++和JavaScript一样。

*每一个QML文件都需要一个根元素，就像HTML一样。

*一个元素使用它的类型声明。然后使用{}进行包含。

*元素拥有属性，他们按照name：value的格式来赋值。

*任何在qml文档中的元素都可以使用它们的id进行访问（id是一个任意地标识符）。

*元素可以嵌套，这意味着一个父元素可以拥有多个子元素。子元素可以通过访问parent关键字来访问它们的父元素。

好的编程习惯

在编写qml文件时，会经常使用id或者关键字parent来访问你的父对象。有一个比较好的方法是命名你的根元素对象id为root（id：root），这样就不用去思考你的qml文件中的根元素应该用什么方式命名了。

提示：我们可以通过Qt Creator编写建立工程来编写和运行编写好的qml文件，也可以在终端运行命令来执行qml文件，比如：

$ $QTDIR/bin/qmlscene rectangle.qml

将 $QTDIR 替换为你自己Qt的安装路径。qmlscene会执行Qt Quick运行环境初始化，并且解释这个qml文件。

Windows环境下，运行$QTDIR/bin/qmlscene  rectangle.qml 和 $QTDIR/bin/qmlscene.exe  rectangle.qml效果是一样的。

截图

运行qmlscene命令：

运行结果截图：