QT-- QT Designer

转自《Meego:阿汤学QT-- QT Designer

用这个工具我们可以设计出程序的UI(widget或dialog),不仅仅设计UI,而且可以直接程序的流程(QT的signal 与slot架构),看个例子:

我们划出的UI,但Designer生成的并不是C/Python代码,而是生成用xml描述的文件,我们看看上面这个UI生成的代码:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">

主窗口UI

<class>Dialog</class>
<widget name="Dialog">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>400</width>
<height>300</height>
</rect>
</property>
<property name="windowTitle">
<string>Dialog</string>
</property>

按键区域

<widget name="buttonBox">
<property name="geometry">
<rect>
<x>30</x>
<y>240</y>
<width>341</width>
<height>32</height>
</rect>
</property>
<property name="orientation">
<enum>Qt::Horizontal</enum>
</property>

按钮

<property name="standardButtons">
<set>QDialogButtonBox::Cancel|QDialogButtonBox::Ok</set>
</property>
</widget>
</widget>
<resources/>

signal & slot 设置
<connections>
<connection>
<sender>buttonBox</sender>
<signal>accepted()</signal>
<receiver>Dialog</receiver>
<slot>accept()</slot>
<hints>
<hint type="sourcelabel">
<x>248</x>
<y>254</y>
</hint>
<hint type="destinationlabel">
<x>157</x>
<y>274</y>
</hint>
</hints>
</connection>
<connection>
<sender>buttonBox</sender>
<signal>rejected()</signal>
<receiver>Dialog</receiver>
<slot>reject()</slot>
<hints>
<hint type="sourcelabel">
<x>316</x>
<y>260</y>
</hint>
<hint type="destinationlabel">
<x>286</x>
<y>274</y>
</hint>
</hints>
</connection>
</connections>
</ui>

但是xml文件没有办法直接在程序里面使用,我们需要做一次转换:

uic-qt4:用于生成QT4的C代码;pyuic4 用于生成pyqt4的代码

我们看看转换后的代码:

QT C语言代码,我们可以看到对应xml所生成的头文件,我们在代码中只要实现对应的实例,就可以:

[tom@tomsi-fc Documents]$ uic-qt4 untitled.ui
/********************************************************************************
** Form generated from reading UI file 'untitled.ui'
**
** Created: Mon May 10 16:47:53 2010
**      by: Qt User Interface Compiler version 4.6.2
**
** WARNING! All changes made in this file will be lost when recompiling UI file!
********************************************************************************/

#ifndef UI_UNTITLED_H
#define UI_UNTITLED_H

#include <QtCore/QVariant>
#include <QtGui/QAction>
#include <QtGui/QApplication>
#include <QtGui/QButtonGroup>
#include <QtGui/QDialog>
#include <QtGui/QDialogButtonBox>
#include <QtGui/QHeaderView>

QT_BEGIN_NAMESPACE

class Ui_Dialog
{
public:
QDialogButtonBox *buttonBox;

void setupUi(QDialog *Dialog)
{
if (Dialog->objectName().isEmpty())
Dialog->setObjectName(QString::fromUtf8("Dialog"));
Dialog->resize(400, 300);
buttonBox = new QDialogButtonBox(Dialog);
buttonBox->setObjectName(QString::fromUtf8("buttonBox"));
buttonBox->setGeometry(QRect(30, 240, 341, 32));
buttonBox->setOrientation(Qt::Horizontal);
buttonBox->setStandardButtons(QDialogButtonBox::Cancel|QDialogButtonBox::Ok);

retranslateUi(Dialog);
QObject::connect(buttonBox, SIGNAL(accepted()), Dialog, SLOT(accept()));
QObject::connect(buttonBox, SIGNAL(rejected()), Dialog, SLOT(reject()));

QMetaObject::connectSlotsByName(Dialog);
} // setupUi

void retranslateUi(QDialog *Dialog)
{
Dialog->setWindowTitle(QApplication::translate("Dialog", "Dialog", 0, QApplication::UnicodeUTF8));
} // retranslateUi

};

namespace Ui {
class Dialog: public Ui_Dialog {};
} // namespace Ui

QT_END_NAMESPACE

#endif // UI_UNTITLED_H

pyqt4的代码,与C代码大同小异,但更简单一些,我们可以看看代码的含义:

[tom@tomsi-fc Documents]$ pyuic4 untitled.ui
# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'untitled.ui'
#
# Created: Mon May 10 16:51:09 2010
#      by: PyQt4 UI code generator 4.7
#
# WARNING! All changes made in this file will be lost!

from PyQt4 import QtCore, QtGui

class Ui_Dialog(object):
def setupUi(self, Dialog):

//UI设置
Dialog.setObjectName("Dialog")
Dialog.resize(400, 300)
self.buttonBox = QtGui.QDialogButtonBox(Dialog)
self.buttonBox.setGeometry(QtCore.QRect(30, 240, 341, 32))
self.buttonBox.setOrientation(QtCore.Qt.Horizontal)
self.buttonBox.setStandardButtons(QtGui.QDialogButtonBox.Cancel|QtGui.QDialogButtonBox.Ok)
self.buttonBox.setObjectName("buttonBox")
//设置signal 与 slot
self.retranslateUi(Dialog)
QtCore.QObject.connect(self.buttonBox, QtCore.SIGNAL("accepted()"), Dialog.accept)
QtCore.QObject.connect(self.buttonBox, QtCore.SIGNAL("rejected()"), Dialog.reject)
QtCore.QMetaObject.connectSlotsByName(Dialog)
//设置主窗口的标题
def retranslateUi(self, Dialog):
Dialog.setWindowTitle(QtGui.QApplication.translate("Dialog", "Dialog", None, QtGui.QApplication.UnicodeUTF8))



刚才我们看到设置好的signal & slot,自己来设置一个,我们可以设置针对buttonbox的signal, (本来QDialogButtonBox是用于给按键布局的widget,并不用与设置鼠标按键的相应,这里只是举例)在signal/slot编辑模式,我们在buttonbox上拖动鼠标到背景,在弹出的Configure Connection框中,我们设置clicked()对应exec()这样我们就设置了鼠标的点击对应的程序的退出函数,完成了对信号的相应。

总结一下思路,Designer就是帮助我们完成UI和signal/slot的图形化设计,我们再用uic工具生成对应的class,我们在程序中实现对应class的实例,就完成了UI的代码。

posted on 2010-05-19 22:36 八零未成年 阅读(2250) 评论(0)  编辑 收藏 引用 所属分类: C++


只有注册用户登录后才能发表评论。
网站导航: 博客园   IT新闻   BlogJava   知识库   博问   管理


<2010年5月>
2526272829301
2345678
9101112131415
16171819202122
23242526272829
303112345

导航

统计

常用链接

留言簿

随笔分类

随笔档案

搜索

最新评论

阅读排行榜

评论排行榜