1. 程式人生 > >QtQuick基礎教程(二)---QML基本語法

QtQuick基礎教程(二)---QML基本語法

QML語言特性

QML的語法效法CSS,是一種宣告式語言(Declarative Code),屬性定義及關係直接寫在定義體中,編寫效率極高。
QML原始碼一般由QML引擎從單獨的QML程式碼檔案中讀取。

Import語句

QML程式碼中,import語句一般寫在頭幾行。可以是以下幾種之一:
- 包含型別的全名空間
- 包含QML程式碼檔案的目錄
- 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

物件宣告

每段QML程式碼都定義一個物件樹。所有的QtQuick元素都是繼承於QQuickItem(QML中的Item型別),包括Rectangle、Text等。
在定義物件的同時,物件的屬性也會被賦初值。每個物件都可在其內部再宣告子物件。每個物件的內容都由大括號包圍。如下:

Rectangle {
    width: 100
    height: 100
    color: "red"
}

等價於:

Rectangle { width: 100; height: 100; color: "red" }

Rectangle是QtQuick模組中已經定義好的,包含width、height、color三個屬性。
這段程式碼可以放進一個單獨的QML檔案供其他檔案引用。

子物件

每個QML物件內可宣告無限個子物件,如下程式碼:

import QtQuick 2.0

Rectangle {
    width: 200
    height: 200
    color
: "red" Text { anchors.centerIn: parent // 此處parent是Rectangle text: "Hello, QML!" } }

註釋

QML的註釋,類似於C++、Java和Javasript等,有兩種:

  • 單行註釋時使用雙斜槓//
  • 多行註釋使用 /* … */
    程式碼如下:
Text {
    text: "Hello world!"    //a basic greeting
    /*
        We want this text to stand out from the rest so
        we give it a large size and different font.
     */
    font.family: "Helvetica"
    font.pointSize: 24
}

模組宣告

QML每個類都單獨存放一個檔案,每個檔案都是一個模組(有點類似於Matlab),但不能單獨宣告一個函式,函式必須寫在類內,或者用Javascript程式碼。
引用時,就不再以物件的名了,而是以模組名使用。比如上程式碼儲存在ABC.qml檔案中,import之後就使用ABC.*了,命名上和Text型別再沒有關係。
如果不考慮C++擴充套件的話,所有的QML程式碼都是使用已有的QML元素型別完成的。