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

迷南。 2021-12-13 03:13 293阅读 0赞

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

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

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

![2010102717492719.png][]

gotocelldialog.ui文件内容：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] 代码

<? 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 > & 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文件内容：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] 代码

\#  \-\*- 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。代码如下：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] 代码

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()

最终的效果图：

![2010102718004680.png][]

转载于:https://www.cnblogs.com/seanlv/archive/2010/10/27/qt\_designer\_pyside.html

[2010102717492719.png]: /images/20211210/37a7e0a70d7749a4b2830acd381cfc91.png
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211210/883671df30bd454fa5b0622ebd73826b.png
[2010102718004680.png]: /images/20211210/8921ae57815c47268eb491df94d1a172.png