QML

QML

編程範型	編程範型：宣告式編程、手稿語言
實作者	Qt發展框架
面市時間	2009
目前版本	6.4
型態系統	動態、強型別
網站	[1]
啟發語言
JavaScript、Qt
影響語言
Qt

QML

副檔名	.qml
網路媒體型式	text/x-qml
開發者	Qt Project
格式類型	手稿語言
網站	qt-project.org/doc/qt-5/qmlapplications.html

QML (Qt Markup Language 或 Qt Meta Language 或 Qt Modeling Language) 是基於JavaScript、宣告式編程的程式語言，用於設計圖形使用者介面為主的應用程式。它是Qt Quick，諾基亞開發的使用者介面建立套件的一部分。QML 主要用於行動應用程式，注重於觸控輸入、流暢的動畫（60張/秒）和使用者體驗。QML documents 描述元素的物件樹。

QML 元素可以透過標準 JavaScript 增強，包括這 inline 和引入.js 檔。元素可以也無縫整合和使用 Qt 框架的 C++ 元件擴展。

語言的名稱是 QML。runtime的名稱是 QQuickView。

語法、語義

基本語法

範例：

import QtQuick 1.0

 Rectangle {
     id: canvas
     width: 200
     height: 200
     color: "blue"

     Image {
         id: logo
         source: "pics/logo.png"
         anchors.centerIn: parent
         x: canvas.height / 5      
     }
 }

動畫

 Rectangle {
     id: rect
     width: 120; height: 200

     Image {
         id: img
         source: "pics/qt.png"
         x: 60 - img.width/2
         y: 0

         SequentialAnimation on y {
             loops: Animation.Infinite
             NumberAnimation { to: 200 - img.height; easing.type: Easing.OutBounce; duration: 2000 }
             PauseAnimation { duration: 1000 }
             NumberAnimation { to: 0; easing.type: Easing.OutQuad; duration: 1000 }
         }
     }
 }

Qt/C++ 整合

QML 不需要 Qt/C++ 的知識就能使用，但它可以輕鬆地擴展 Qt。

熟悉的概念

QML 提供直接訪問，從以下來自 Qt 的概念：

• QAction – action 類型
• QObject signals and slots – 作為在 JavaScript 中調用的函式
• QObject properties – 作為 JavaScript 中的變數
• QWidget – QDeclarativeView 是一個 QML-displaying widget
• Q*Model – 直接用在資料綁定 (如 QAbstractItemModel)

Qt 訊號處理式

 MouseArea {
     onPressed: console.log("mouse button pressed")
 }

操作方法

• Calling Qt class methods from QML
• Creating a custom QML element with Qt
• Connecting Qt signal to QML function

開發工具

由於 QML 和 Javascript 的語法相似，大多數支援 Javascript 的編輯器均可編輯 QML。但是從 Qt Creator 的 2.1 版本開始，該 IDE 提供了完整的語法突顯、代碼補全、內建幫助和所見即所得編輯器。在商業版本的 Creator 中，所見即所得編輯器還會提供更多的功能。

外部連結

• QML Reference Documentation
• Introduction to the QML language
• QML Examples and Demos
• Qt Labs Blog Posts related to QML
• QML Tutorial