转自《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的代码。