QML入门教程

QML是Qt推出的Qt Quick技术的一部分，是一种新增的简便易学的语言。QML是一种陈述性语言，用来描述一个程序的用户界面：无论是什么样子，以及它如何表现。在QML，一个用户界面被指定为具有属性的对象树。 这使得Qt更加便于很少或没有编程经验的人使用。

QML实际上是Qt Quick （Qt4.7.0中的新特性）核心组件之一：Qt Quick是一组旨在帮助开发者创建在移动电话，媒体播放器，机顶盒和其他便携设备上使用越来越多的直观、现代、流畅UI的工具集合。

QML可以在脚本里创建图形对象，并且支持各种图形特效，以及状态机等，同时又能跟Qt写的C++代码进行方便的交互，使用起来非常方便。

QML模块为用QML语言开发应用程序和库提供了一个框架，它定义、实现语言和引擎，并提供了让开发者使用自定义类型、JavaScript与C++整合的QML代码来扩展QML语言的API，QML模块提供了QML API和C++ API。

    Qt的QML模块提供QML应用程序的语言和基础，Qt Quick模块提供了许多可视化组件，支持模型-视图，动画框架，多用于构建用户界面。

 

包括模块类的定义，可以使用以下语句：

#include

 

在QML中可通过导入QtQML让QML类型可用，可以使用以下语句：

import QtQml 2.0

 

要链接模块，可以使用以下语句（添加至qmake .pro中）：

QT += qml

 

简单的介绍就到这里，如果要了解更多，请参考专业的Qt Assistant。。。

 

举例：

.qml内容文件如下：

 

import QtQuick 2.0

import QtQuick.Window 2.1

 

Window {

    width: 400

    height: 200

    color: "green"

 

    Column {

        anchors.centerIn: parent

        spacing: 10

 

        Text {

            text: "Hello World"

            font.family: "Helvetica"

    font.pointSize: 20

            color: "white"

}

 

Text {

    color: Qt.rgba(0, 0, 255, 100)

    font.pointSize: 16

    text: Qt.md5("hello, world")

        }

    }

}

 

Window：窗体

Text：既可以显示普通文本和富的文本项。例如，可以定义特定字体、大小、颜色的文本。

Column ：子项按列显示

width、height、color、text等就不过多说明了，分别代表：宽、高、颜色、文本。  

anchors.centerIn: parent表示位于窗体中央

spacing: 10表示各个子项的间距为10

Qt.md5("hello, world")使用md5对"hello,world"加密

 

运行：

• 方式一：右键.qml文件->打开方式（选择qml.exe或qmlviewer.exe）即可。
• 方式二：使用QQuickView模块。

在main方法中添加以下代码：

QQmlEngine *engine = new QQmlEngine();

QQmlComponent *component = new QQmlComponent(engine);

component->loadUrl(QUrl("qrc:/qml/HelloWorld.qml")); //QUrl::fromLocalFile("HelloWorld.qml")

if(!component->isReady())

{

        qWarning("%s", qPrintable(component->errorString()));

 

        return -1;

}

QObject *object = component->create();

QQuickWindow *window = (qobject_cast)(object);

window->show();