你的第一个简单小程序 - 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_())

 

如果你对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]. 这里查看元素和他们的属性
 
 

posted on 2012-10-13 18:43  Orangeink  阅读(1122)  评论(0)  编辑  收藏  举报

导航