Meego:阿汤学QT-- QT Designer

现在大家都已经习惯了使用图形化工具来设计应用程序，QT当然也提供了这样的工具：QT  Designer， 我们在这里也不需要介绍太多的细节，只是谈谈自己对这个工具的理解
。如果需要请参考：A Quick Start to 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的代码。

原文链接：http://software.intel.com/zh-cn/blogs/2010/05/10/meegoqt-qt-designer/