翻译自 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_())
如果你对PySide(或PyQt)有基础入门知识了. 那么这段代码应该看起来很熟悉.
有几点新奇的就是你必须导入QDeclarativeView , 并且设置QDeclarativeView对象的URL(这个URL是你的QML文件地址).
之后,就像其他的QT控件一样, 你需要调用
QDeclarativeView.show().
程序的运行结果, 如下图:
注意: 如果你开发的是桌面应用程序, 你可以考虑在view.show()之前添加
view.setResizeMode(QDeclarativeView.SizeRootObjectToView)
这会使得我们的那个矩形随着窗口大小的改变而改变. (也就是说你的元素会和窗口始终保持一个相对大小。)
直接看图: (以下是你没添加
view.setResizeMode(QDeclarativeView.SizeRootObjectToView)
的外观
)
可以从图中看到, 当你把窗口拖大后, 那个红色矩形的大小不变.
添加了
view.setResizeMode(QDeclarativeView.SizeRootObjectToView)
之后的外观, 如下
:
可以看到, 现在我们对窗口的缩放操作会影响到那个红色矩形, 红色矩形的大小现在会随着窗口的大小改变而改变
你可以花些时间来尝试进行一些小修改, 比如颜色, 文本, 或给每个元素设置一些其他属性,
你可以在
QML Elements
[doc.qt.nokia.com]. 这里查看元素和他们的属性