你的第一个简单小程序 - PySide and QtQuick/QML - Orangeink

你的第一个简单小程序 - PySide and QtQuick/QML

翻译自 http://qt-project.org/wiki/Hello-World-in-PySide-and-QtQuick

有略微修改.(加了不少图. 看起来更直观. 原教程没图。。)

如果你的电脑上装了python和PySide那么就可以直接开始学了,

QtQuick和QML不需要你额外去安装.

--------开始--------

QML是一个描述语言，用于设计程序的用户界面。

在QML里, 一个用户界面指定为一个对象树与属性。

在这个教程里, 我们会展示如何用 PySide 和 QML 制作一个简单的 hello world 程序

一个 PySide/QML 程序由至少2个不同的文件组成, 一个文件用QML描述用户界面(后缀记得保存为*.qml),

还有一个python文件(*.py)来读取这个qml文件.

此例中, 不要忘记要把这2个文件放在同一个目录下. (不是一定要放在同一个目录. 只是这样比较方便)

这里是一个简单的QML文件, 我们把它命名为view.qml:

import QtQuick 1.0
 
Rectangle {
    width: 200
    height: 200
    color: "red"
 
    Text {
        text: "Hello World"
        anchors.centerIn: parent
    }
}

首先我们先导入 QtQuick 1.0来开始(import QtQuick 1.0).

其余的QML代码对于那些先前学习过HTML或XML的同学来说相当简单

我们创建了一个红色矩形, 宽和高是200*200, 并且在这个矩形中, 我们添加了一个文本元素(Text), "Hello World".

这段代码 anchors.centerIn: parent 使得文本在父容器中居中显示 (离它最近的那个父容器, 在此例中是Rectangle)

父容器就是包裹他的那个容器

现在我们来看看python文件:

import sys
from PySide.QtCore import *
from PySide.QtGui import *
from PySide.QtDeclarative import QDeclarativeView
 
# Create Qt application and the QDeclarative view
app = QApplication(sys.argv)
view = QDeclarativeView()



# 创建一个QUrl对象来装载qml文件
url = QUrl('view.qml')

# 设置QML文件并显示
view.setSource(url)
view.setResizeMode(QDeclarativeView.SizeRootObjectToView)
view.show()


sys.exit(app.exec_())