PySide2学习总结（七）Qml教程

基础类型

首先由一个简单的示例来进行QML的基础介绍。
在view.qml编辑代码如下：

// 导入Qt附带的内置QML类型（如Rectangle，Image，...）
import QtQuick 2.0

// 使用Rectangle类型声明根元素，Rectangle类型是在QML中创建应用程序的基本构建块之一
Rectangle {
   
	// id用于标识该元素
    id: page
    // 设置元素属性
    width: 500; height: 200
    color: "lightgray"

	// 添加Text元素作为Rectangle元素的子元素以显示文本
    Text {
   
        id: helloText
        text: "Hello world!"
        // 使用其y属性将其定位在距其父级顶部30px的位置
        y: 30
        // 指定Text元素在Rectangle元素中水平居中
        anchors.horizontalCenter: page.horizontalCenter
        // 文本属性设置
        font.pointSize: 24; font.bold: true
    }
}

在main.py中编辑代码如下：

from PySide2.QtWidgets import QApplication
from PySide2.QtQuick import QQuickView
from PySide2.QtCore import QUrl

app = QApplication([])
view = QQuickView()
url = QUrl("view.qml")

view.setSource(url)
view.show()
app.exec_()

运行效果如图：

QML组件(Components)

在上面程序的基础上，添加六个提供选择不同颜色的组件(Cell)，Cell组件在另外的qml文件中定义，使用时直接引入。
定义组件的文件名必须以大写字母开头。
在Cell.qml文件中编辑代码如下：