QML 简单类型

参考：QML Tutorial - Qt for Python

学习 QML 基本类型，创建自己的 QML 组件、属性和信号，将在 states 和 transitions 的帮助下创建简单的动画。

先看简单的例子。

// view.qml
import QtQuick 2.0


Rectangle {
    id: page
    width: 320; height: 480
    color: "lightgray"

    Text {
        id: helloText
        text: "Hello world!"
        y: 30
        anchors.horizontalCenter: page.horizontalCenter
        font.pointSize: 24; font.bold: true
    }

}

大多数 QML 文件将从 QtQuick 导入内置的 QML 类型（如 Rectangle , Image）

这里声明根类型为 Rectangle，包含 Text 类型。

直接调用 Python 接口渲染。

import sys
from PySide6.QtWidgets import QApplication
from PySide6.QtQuick import QQuickView


if __name__ == "__main__":
    app = QApplication()
    view = QQuickView()

    view.setSource("view.qml")
    view.show()
    sys.exit(app.exec())

显示为：

需要注意：这里两个类型都有属性 id，用于标识该类型。

也可以给矩形添加边框：

// view.qml
import QtQuick 2.0


Rectangle {
    id: page
    width: 320; height: 480
    color: "lightgray"
    border.color: "black"
    border.width: 5

    Text {
        id: helloText
        text: "Hello world!"
        y: 30
        anchors.horizontalCenter: page.horizontalCenter
        font.pointSize: 24; font.bold: true
    }

}

显示为：

也可以添加渐变效果：

// view.qml
import QtQuick 2.0


Rectangle {
    id: page
    width: 320; height: 480
    border.color: "black"
    border.width: 5
    gradient: Gradient {
        GradientStop { position: 0.0; color: "lightsteelblue" }
        GradientStop { position: 1.0; color: "blue" }
    }

    Text {
        id: helloText
        text: "Hello world!"
        y: 30
        anchors.horizontalCenter: page.horizontalCenter
        font.pointSize: 24; font.bold: true
    }

}