使用Qt Designer为PySide设计用户界面

使用Qt Designer为PySide设计用户界面 - Sean Lv - 博客园

使用Qt Designer为PySide设计用户界面

Qt Designer中文名：Qt设计师，是一个可视化GUI设计工具。可以帮助我们加快编写Qt程序的速度。Qt Designer可以将设计好的用户界面保存为.ui文件，其实是XML格式的文本文件。

为了在PySide使用.ui文件，我们需要通过工具pyside-uic将.ui文件转换为.py文件，然后将转换后的.py文件引入我们自己的代码中。

下面是一个实际的例子，首先在Qt Designer中设计一个对话框，名为GoToCellDialog，并另存为 gotocelldialog.ui。

gotocelldialog.ui文件内容：

代码

<? xml version="1.0" encoding="UTF-8" ?>
< ui version ="4.0" >
< class > GoToCellDialog </ class >
< widget class ="QDialog" name ="GoToCellDialog" >
< property name ="geometry" >
< rect >
< x > 0 </ x >
< y > 0 </ y >
< width > 226 </ width >
< height > 70 </ height >
</ rect >
</ property >
< property name ="windowTitle" >
< string > Go to Cell </ string >
</ property >
< widget class ="QLineEdit" name ="lineEdit" >
< property name ="geometry" >
< rect >
< x > 98 </ x >
< y > 8 </ y >
< width > 119 </ width >
< height > 20 </ height >
</ rect >
</ property >
</ widget >
< widget class ="QLabel" name ="label" >
< property name ="geometry" >
< rect >
< x > 8 </ x >
< y > 8 </ y >
< width > 84 </ width >
< height > 20 </ height >
</ rect >
</ property >
< property name ="text" >
< string > &amp; Cell Location: </ string >
</ property >
< property name ="buddy" >
< cstring > lineEdit </ cstring >
</ property >
</ widget >
< widget class ="QPushButton" name ="okButton" >
< property name ="geometry" >
< rect >
< x > 58 </ x >
< y > 38 </ y >
< width > 77 </ width >
< height > 25 </ height >
</ rect >
</ property >
< property name ="text" >
< string > Ok </ string >
</ property >
</ widget >
< widget class ="QPushButton" name ="cancelButton" >
< property name ="geometry" >
< rect >
< x > 141 </ x >
< y > 38 </ y >
< width > 77 </ width >
< height > 25 </ height >
</ rect >
</ property >
< property name ="text" >
< string > Cancel </ string >
</ property >
</ widget >
</ widget >
< resources />
< connections />
</ ui >

 

接下来使用pyside-uic转换.ui文件：

pyside - uic gotocelldialog.ui - o gotocelldialog_ui.py

 

gotocelldialog_ui.py文件内容：

代码

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'gotocelldialog.ui'
#
# Created: Wed Oct 27 17:13:19 2010
# by: PySide uic UI code generator
#
# WARNING! All changes made in this file will be lost!

from PySide import QtCore, QtGui

class Ui_GoToCellDialog(object):
def setupUi(self, GoToCellDialog):
GoToCellDialog.setObjectName( " GoToCellDialog " )
GoToCellDialog.resize( 226 , 70 )
self.lineEdit = QtGui.QLineEdit(GoToCellDialog)
self.lineEdit.setGeometry(QtCore.QRect( 98 , 8 , 119 , 20 ))
self.lineEdit.setObjectName( " lineEdit " )
self.label = QtGui.QLabel(GoToCellDialog)
self.label.setGeometry(QtCore.QRect( 8 , 8 , 84 , 20 ))
self.label.setObjectName( " label " )
self.okButton = QtGui.QPushButton(GoToCellDialog)
self.okButton.setGeometry(QtCore.QRect( 58 , 38 , 77 , 25 ))
self.okButton.setObjectName( " okButton " )
self.cancelButton = QtGui.QPushButton(GoToCellDialog)
self.cancelButton.setGeometry(QtCore.QRect( 141 , 38 , 77 , 25 ))
self.cancelButton.setObjectName( " cancelButton " )
self.label.setBuddy(self.lineEdit)

self.retranslateUi(GoToCellDialog)
QtCore.QMetaObject.connectSlotsByName(GoToCellDialog)

def retranslateUi(self, GoToCellDialog):
GoToCellDialog.setWindowTitle(QtGui.QApplication.translate( " GoToCellDialog " , " Go to Cell " , None, QtGui.QApplication.UnicodeUTF8))
self.label.setText(QtGui.QApplication.translate( " GoToCellDialog " , " &Cell Location: " , None, QtGui.QApplication.UnicodeUTF8))
self.okButton.setText(QtGui.QApplication.translate( " GoToCellDialog " , " Ok " , None, QtGui.QApplication.UnicodeUTF8))
self.cancelButton.setText(QtGui.QApplication.translate( " GoToCellDialog " , " Cancel " , None, QtGui.QApplication.UnicodeUTF8))

 

然后编写代码，引用gotocelldialog_ui.py，并显示GoToCellDialog。代码如下：

代码

1 # !/usr/bin/env python
2  
3   import sys
4
5   from PySide.QtCore import *
6   from PySide.QtGui import *
7
8   from gotocelldialog_ui import Ui_GoToCellDialog
9
10   class GoToCellDialog(QDialog):
11 def __init__ (self, parent = None):
12 QDialog. __init__ (self, parent)
13
14 self.ui = Ui_GoToCellDialog()
15 self.ui.setupUi(self)
16
17   def main():
18 app = QApplication(sys.argv)
19 d = GoToCellDialog()
20 d.show()
21 sys.exit(app.exec_())
22
23   if __name__ == ' __main__ ' :
24 main()

复制代码

 

最终的效果图：