Qt界面UI之QML初見(學習筆記四)


拖了大半年,今天終於有更新了。。。我自己都不好意思,最近太忙了!

今天講一下:QML語法

一 概述

QML是一種專門用於構建用戶界面的編程語言,它允許用戶構建高性能,具有流暢特效的可視化應用程序,QML是可讀的,聲明式的文檔,具有類似JSON的語法,支持使用JavaScrip表達式,具有動態屬性綁定等特性。

二 QML語法基礎

QMl的代碼一般長如下:

import QtQuick 2.2

Rectangle {
    width: 360
    height: 360

    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }

    Text {
        anchors.centerIn: parent
        text: "Hello World"
    }
}

1 導入語句 import

  import語句導入了QtQuick模塊,它包含了QML各種類型!

2 對象和屬性

QML文檔就是一個QML對象樹,在這段代碼中創建了兩個對象,Rectangle和它的子對象Image,對象有它的類型指定,大寫字母開頭,后面跟一對大括號,里面有寬,高,顏色等屬性。

屬性通過“屬性:值”來初始化,屬性和它的值使用一個冒號隔開。屬性可以分開寫,也可寫在一行,分開時分號不是不需的,寫在一行必須有分號。

Rectangle {
    width: 360
    height: 36
}

3 布局

Image的anchors.centerIn起到了布局的作用,使Image處於對象的中心位置。還有其他布局方式。

4 注釋

QML的注釋和javascript相似。//單行注釋,/**/多行注釋。

5 表達式

“屬性:值”中的值可以設置成表達式,例如:

Item {
    width: 100*3
    height: 50+22
}

  表達式中可包含其他對象或屬性的引用,這樣便創建了一個綁定,當表達式的值改變時,這個屬性會自動更新為新的值。

6 調試輸出

在QML代碼中,可以用console.log()和conlole.debug()來輸出調試信息。

接下來詳細的講解下import語句

三 import導入語句

默認情況下,QML文檔可以訪問到該.qml同目錄下的對象類型,要想訪問其他對象類型,就必須使用import導入該類型的命名空間。

1 模塊導入

import<ModuleIdentifier><Version.Number> [as<Qualifier>] 例如:

import QtQuick 2.2 as Quick

Quick.Rectangle {
    width: 360
    height: 360
}

 

2 導入目錄

QML文檔支持直接導入包含有QML文檔的目錄:import “<DirectoryPath>” [as<Qualifier>]
<DirectoryPath>既可以是本地目錄,也可以是遠程目錄
<Qualifier>和前面一樣,是限定符。
例如:
import “../mycomponnets” 和 import "https://wiki.autodesk.com/mycomponnets"
注意:當導入網絡上的目錄時,只能訪問該目錄qmldir文件制定的QML文件和JavaScript文件。

3 目錄清單qmldir文件

除了遠程目錄,本地目錄也可以包含一個qmldir文件,這樣可以只暴露qmldir中指定類型給導入該目錄的客戶端。如果目錄中的JavaScript資源沒有聲明在一個qmldir文件中,那么它們不能暴露給客戶端。
目錄清單的語法如下:

4 JavaScript資源導入語句

import “<JavaScriptFile>” as "<Identifier>"

每個導入的JavaScript文件都要指定一個標識符,以便能夠在QML文檔中訪問,這個標識符必須是唯一的。

此筆記主要參考《QT5編程入門》一書,並非原創,但寫了這么多也很耗時,純手打。

 
        

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM