注:所有内容放到一个 containers -> widget 里,然后将widget拉开到适应窗口,选择水平布局或者是垂直布局,widget里的内容就会自动随窗体变大变小了。
1使用qtdesigner新建一个对话框,然后拖放几个按钮和文本框,按钮使用水平布局,效果如下:
鼠标选中水平布局再选中文本框,进行垂直布局,如下:
垂直布局后的效果如下: 然后,如何让窗体中的控件随着窗体大小的变化而变化大小呢?这个时候就要用到顶层布局了,使用网格(栅格)布局,在窗体空白处点击右键,如下: 布局后的效果: 到此,布局就完成了,试着拖动一下窗体大小,看看里面的控件大小是否随之变化。
下面来熟悉一个重要属性: 点击文本框,在属性栏中找到如下属性: 水平策略和垂直策略用来表示控件缩放的,说明如下: Fixed: 当前大小是最合适的,不能改变 Minimum: 当前大小已经是最小, 不能再缩小了, 但可以放大。 Maximum: 当前大小已经是最大, 不能再放大了,但可以缩小。 Preferred: 这个感觉不好用,不会用 Expanding: 可以增大或者缩小。在上面例子中文本框的水平和垂直策略就是expanding 需要注意的问题:在窗体中布局后,打开对象查看器,最顶层的对象不是Form,而是QWidget
在我们的界面逻辑类中需要将原来的代码做出相应的修改,如下: class SimpleDialogForm(Ui_Form, QtWidgets.QMainWindow):
改为 class SimpleDialogForm(Ui_Form, QtWidgets.QWidget):
2界面设计完成后,需要绑定信号和槽,有两种设计方法,第一种是在qtdesigner中将所有用到的按钮事件全部绑定,然后在界面逻辑类中覆写槽方法。第二种是在QtDesigner中仅将与系统事件相关的信号绑定(比如关闭事件)。在此我们使用第二种方法。 进入信号和槽的编辑界面,操作方法如下: 在编辑界面中,点击close按钮,拖动到窗体空白处,弹出的窗体中,选择close事件,此时按钮的click事件就会执行窗体的close方法。 到此完成了窗体的设计,还有一个问题
使用pyuic5 simpleDialog.py > ui_simpledialog.py 命令完成窗体逻辑类的代码生成。
在我们自己编写的窗体逻辑类中,绑定打开和保存的按钮信号,并且覆写窗体的关闭事件,我们需要在窗体关闭时,弹出一个确认对话框。 代码如下: - <div align="left">from PyQt5 import QtCore, QtGui, QtWidgets</div><div align="left">from ui_simpledialog import Ui_Form</div><div align="left">import sys</div><div align="left">import os</div><div align="left">import codecs</div><div align="left">class SimpleDialogForm(Ui_Form, QtWidgets.QWidget):</div><div align="left"> def __init__(self, parent = None):</div><div align="left"> super(SimpleDialogForm, self).__init__()</div><div align="left"> self.setupUi(self)</div><div align="left"> #binding slot</div><div align="left"> self.btnOpen.clicked.connect(self.openFile)</div><div align="left"> self.btnSaveas.clicked.connect(self.saveasFile)</div>
- <div align="left"> def openFile(self):</div><div align="left"> fd = QtWidgets.QFileDialog(self)</div><div align="left"> fileName,filetype = fd.getOpenFileName(caption = "open txt file", directory = 'd:/',filter = "Text Files (*.txt)")</div><div align="left"> if os.path.exists(fileName):</div><div align="left"> with codecs.open(fileName,"r","utf-8") as f:</div><div align="left"> txt = f.read()</div><div align="left"> self.textEdit.setText(txt)</div><div align="left"> print(filetype)</div>
- <div align="left"> def saveasFile(self):</div><div align="left"> fd = QtWidgets.QFileDialog(self)</div><div align="left"> fileName,fileType = fd.getSaveFileName(caption = 'save a file as ', directory = '',filter = "Text Files (*.txt)")</div><div align="left">if fileName == '':</div><div align="left">return</div><div align="left"> with codecs.open(fileName,'w','utf-8') as f:</div><div align="left"> f.write(self.textEdit.toPlainText())</div><div align="left"> pass</div>
- <div align="left"> '''override windows close event, we need a query messagebox'''</div><div align="left"> def closeEvent(self, event):</div><div align="left"> result = QtWidgets.QMessageBox.question(self, "Confirm Exit...",</div><div align="left"> "Are you sure you want to exit ?", QtWidgets.QMessageBox.Yes| QtWidgets.QMessageBox.No)</div><div align="left"> event.ignore()</div><div align="left"> if result == QtWidgets.QMessageBox.Yes:</div><div align="left"> event.accept()</div><div align="left"> pass</div>
- <div align="left"> def yourFunctions(self):</div><div align="left"> pass</div>
- <div align="left">if __name__ == "__main__":</div><div align="left"> app = QtWidgets.QApplication(sys.argv)</div><div align="left"> main = SimpleDialogForm()</div><div align="left"> main.show()</div><div align="left"> sys.exit(app.exec_())</div>
复制代码
几处要说明的地方: 1文件的读取写入,一定要指明编码格式。 2文件的操作最好放在with语句块中,完成之后python自动关闭 3浏览对话框的几个参数要记住: fd.getOpenFileName(caption = "open txt file", directory = 'd:/',filter = "Text Files (*.txt)") 记不住的话就在python idle中使用help命令自己查。 4为了不让自己被编码格式搞蒙,请使用codecs模块(它可以处理现在任意编码的字符)。
到此,一个完整的窗体就完成了。
其实直接使用example中的例子就行,稍微改改,一个窗体就很完美了。
前一篇文章参考:PyQt5创建第一个窗体(正规套路)https://www.nasue.com/forum.php?mod=viewthread&tid=127276&fromuid=1
(出处: 纳速健身)
PyQt-使窗口中的元素跟随窗口大小的变化而变化
* 如果药实现这种视觉状态,那么就需要使用布局的方法。
创建一个控件后,在主窗口上右击选择布局(layout)
Lay Out Horizontally : 纵向布局
Lay Out Vertically:横向布局
Lay Out Horizontally in Splitter: 纵向分裂式布局
Lay Out Vertically in Splitter:横向分裂式布局
Lay Out in a Grid: 网格布局
Lay Out in a Form Layout:表布局
Break Layout:不使用布局
窗口中所有控件都使用布局方法之后,会实现元素的大小随窗口的大小变化而变化。
采用控件和布局之间相互的组合,即可。
|