QML是一种描述性的脚本语言，文件格式以.qml结尾。语法格式非常像CSS(参考后文具体例子)，支持与C++代码进行交互。是Qt推出的Qt Quick技术的一部分，可以在QT creator中以可视化的方式编辑.qml文件，如下所示：（注：我用的环境为Ubuntu 12.04 + QT)

下面来写一个简单的QML示例程序：

1>用QT creator创建一个QML应用程序

工程名设为：qmlTest

创建完成后工程目录如下：

2>编写代码

我将要实现的界面及功能如下：

界面包含一个label和一个按钮，当我点击quit按钮时程序退出。

首先我们编写按钮的qml实现文件，在工程的qml/qmlTest目录下添加一个qml文件Button.qml

 
  
  1. import QtQuick 1.0 
  2.  
  3. Rectangle { 
  4.  
  5.     //identifier of the item 
  6.     id: button 
  7.  
  8.     property string label: "button label" 
  9.  
  10.     //these properties act as constants, useable outside this QML file 
  11.     property int buttonHeight: 75 
  12.     property int buttonWidth: 150 
  13.      
  14.     //the color highlight when the mouse hovers on the rectangle 
  15.     property color onHoverColor: "gold" 
  16.     property color borderColor: "white" 
  17.  
  18.     //buttonColor is set to the button's main color 
  19.     property color buttonColor: "lightblue"     
  20.  
  21.     //set appearance properties 
  22.     radius:10 
  23.     smooth: true 
  24.     border{color: "white"; width: 3} 
  25.     width: buttonWidth; height: buttonHeight 
  26.      
  27.     Text{ 
  28.         id: buttonLabel 
  29.         anchors.centerIn: parent 
  30.         text: label 
  31.     } 
  32.  
  33.     //buttonClick() is callable and a signal handler, onButtonClick is automatically created 
  34.     signal buttonClick() 
  35.     onButtonClick: { 
  36.         console.log(buttonLabel.text + " clicked" ) 
  37.     } 
  38.  
  39.     //define the clickable area to be the whole rectangle 
  40.     MouseArea{  
  41.         id: buttonMouseArea 
  42.         anchors.fill: parent    //stretch the area to the parent's dimension 
  43.         onClicked: buttonClick() 
  44.               
  45.         //if true, then onEntered and onExited called if mouse hovers in the mouse area 
  46.                 //if false, a button must be clicked to detect the mouse hover 
  47.                 hoverEnabled: true 
  48.  
  49.                 //display a border if the mouse hovers on the button mouse area 
  50.                 onEntered: parent.border.color = onHoverColor 
  51.                 //remove the border if the mouse exits the button mouse area 
  52.                 onExited:  parent.border.color = borderColor 
  53.          
  54.     } 
  55.  
  56.     //change the color of the button when pressed 
  57.     color: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor 
  58. } 
 
  
 修改main.qml的内容以使用刚创建的Button组件，如下：
 
  
 
  
  1. import QtQuick 1.1 
  2.  
  3. Rectangle { 
  4.     width: 360 
  5.     height: 360 
  6.     Text { 
  7.         text: qsTr("Hello World") 
  8.     } 
  9.  
  10.     Button { 
  11.         anchors.right: parent.right 
  12.         anchors.top: parent.top 
  13.         anchors.margins: 10 
  14.         buttonWidth: 100 
  15.         buttonHeight: 50 
  16.         label: "Quit" 
  17.         onButtonClick: { 
  18.             Qt.quit(); 
  19.         } 
  20.     } 
  21. } 
 
  
接下来就可以在C++代码中进行调用并显示出来了。
 
  
main.cpp:
 
  
 
  
  1. #include <QApplication> 
  2. #include "qmlapplicationviewer.h" 
  3.  
  4. Q_DECL_EXPORT int main(int argc, char *argv[]) 
  5. { 
  6.     QScopedPointer<QApplication> app(createApplication(argc, argv)); 
  7.  
  8.     QmlApplicationViewer viewer; 
  9.     viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto); 
  10.     viewer.setMainQmlFile(QLatin1String("qml/qmlTest/main.qml")); 
  11.     viewer.showExpanded(); 
  12.  
  13.     return app->exec(); 
  14. } 
 
  
点击运行就可以看到所要的效果了。
 
  
有关QML与C++进行交互的详细介绍可以参考如下链接：
 
  
http://www.developer.nokia.com/Community/Wiki/QML%E4%B8%8EQt_C%2B%2B_%E4%BA%A4%E4%BA%92%E6%9C%BA%E5%88%B6%E6%8E%A2%E8%AE%A8%E4%B8%8E%E6%80%BB%E7%BB%93
 
  
完。