Qt/Qt Quick 概述
< Qt
Qt Quick 包含一個名為 QML 的建模語言，用於構建圖形使用者介面。
在使用 Qt Creator 建立新的 Qt Quick 2 應用程式時，會新增預設的 QML 視窗。
它描述了一個顯示 Hello World 的視窗，單擊該視窗時會關閉。
import QtQuick 2.0
Rectangle {
width: 360
height: 360
Text {
text: qsTr("Hello World")
anchors.centerIn: parent
}
MouseArea {
anchors.fill: parent
onClicked: {
Qt.quit();
}
}
}
- Rectangle 有 5 個主要屬性：border.color, border.width, color, gradient 和 radius；它們定義了矩形的形狀和顏色。
- Text 顯示 Hello World。
- MouseArea 在單擊時退出應用程式。
- anchors 語句是 Item 型別的部分，它被其他可視型別（如 Rectangle 和 Text）繼承。
window.qml:
此檔案描述了一個包含以程式設計方式定義的三角形的視窗。Triangle 專案在 Shapes 庫（版本 1.0）中定義。
import QtQuick 2.0
import Shapes 1.0
Item {
width: 400; height: 300
onWidthChanged: console.log("Width change: ", width)
Triangle {
anchors.top: parent.top;
anchors.left: parent.left;
anchors.right: parent.right;
height : parent.height /2
}
}
application.qrc:
此檔案定義應用程式使用的資源；這裡 window.qml 被新增到 gui 名稱空間中。
<RCC>
<qresource prefix="/gui">
<file>window.qml</file>
</qresource>
</RCC>
main.cpp:
這是應用程式啟動的地方。它包含 triangle.h 檔案中定義的 TriangleItem：它透過函式 qmlRegisterType 在 Shapes 庫中註冊為 Triangle，版本為 1.0。
主視窗從 gui/window.qml 模板開始。
#include "triangle.h"
#include <QGuiApplication>
#include <QtQuick/QQuickView>
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
qmlRegisterType<TriangleItem>("Shapes", 1, 0, "Triangle");
QQuickView view;
// resize items when resizing window
view.setResizeMode(QQuickView::SizeRootObjectToView);
view.setSource(QUrl("qrc:///gui/window.qml"));
view.show();
return app.exec();
}
triangle.h:
三角形專案由幾何形狀（包含 3 個點）和材質（紅色）組成。
紅色三角形在 updatePaintNode 函式中繪製。
#ifndef TRIANGLE_H
#define TRIANGLE_H
#include <QQuickItem>
#include <QSGGeometry>
#include <QSGFlatColorMaterial>
class TriangleItem: public QQuickItem
{
Q_OBJECT
public:
TriangleItem(QQuickItem* parent = 0);
protected:
QSGNode* updatePaintNode(QSGNode*, UpdatePaintNodeData*);
private:
QSGGeometry m_geometry;
QSGFlatColorMaterial m_material;
};
#endif // TRIANGLE_H
triangle.cpp:
材質設定為 Qt::red 顏色。三角形頂點使用視窗邊界（來自 boundingRect() 函式）定義。
然後將材質和幾何形狀分配給新的幾何節點，該節點被新增到場景節點（QSGNode* n）中。
#include "triangle.h"
#include <QQuickWindow>
#include <QSGGeometryNode>
TriangleItem::TriangleItem(QQuickItem *parent):
QQuickItem(parent),
m_geometry(QSGGeometry::defaultAttributes_Point2D(), 3)
{
setFlag(ItemHasContents);
m_material.setColor(Qt::red);
}
QSGNode* TriangleItem::updatePaintNode(QSGNode* n, UpdatePaintNodeData*)
{
if (!n)
n = new QSGNode;
QSGGeometryNode* geomnode = new QSGGeometryNode();
QSGGeometry::Point2D* v = m_geometry.vertexDataAsPoint2D();
const QRectF rect = boundingRect();
v[0].x = rect.left();
v[0].y = rect.bottom();
v[1].x = rect.left() + rect.width()/2;
v[1].y = rect.top();
v[2].x = rect.right();
v[2].y = rect.bottom();
geomnode->setGeometry(&m_geometry);
geomnode->setMaterial(&m_material);
n->appendChildNode(geomnode);
return n;
}
application.pro:
這是 Qt 用於構建我們的小應用程式的專案定義檔案。
QT += qml quick
TARGET = example
TEMPLATE = app
SOURCES += main.cpp \
triangle.cpp
HEADERS += \
triangle.h
RESOURCES += application.qrc
使用以下命令構建並執行應用程式
qmake
make
./example