当前位置：首页 > article >正文

【pyqt】（八）ui文件使用

article 2025/1/9 22:58:18

ui文件使用

前面我们已经学过了简单的UI文件创建（利用Qt Designer）和基础控件的使用。现在我们学习如何把二者融合起来完成开发。UI文件以 XML 格式存储界面的布局和各种控件的属性，我们可以利用Qt Designer开发界面，然后利用代码来实现后端的逻辑编程。这样可以将界面设计部分与逻辑编程部分分离，使得代码结构更加清晰。

在代码中调用ui文件有两种方法，一是动态调用，二是将其转为py文件之后调用。

动态调用

动态调用ui文件主要使用QUiLoader类完成，其需要在QApplication之前先实例化

这里使用我们之前使用Designer做的登录框例子，

from PySide6.QtWidgets import QApplication,QWidget
from PySide6.QtUiTools import QUiLoader

uiLoader = QUiLoader()
class MyWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.ui = uiLoader.load("登录框.ui")  # 注意此处的路径，如果和当前python文件不在同一文件需要指定明确路径

if __name__ == '__main__':
    app = QApplication()
    window = MyWindow()
    window.ui.show()
    app.exec()

转换py文件

在命令行中使用这个命令将ui文件转为py文件

pyside6-uic ./ui/登录框.ui > login.py

py文件中的内容如下所示，它不像我们搭建的框架，把内容都写在init方法中，而是使用一个setupUi方法

在这里插入图片描述

from PySide6.QtWidgets import QApplication,QWidget
from login import Ui_widget  # 导入生成的UI类

class MyWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.ui = Ui_widget()  # 用一个属性来实例化
        self.ui.setupUi(self)  # 设置UI

if __name__ == '__main__':
    app = QApplication()
    window = MyWindow()
    window.show()
    app.exec()

实战-登录框

我们之前已经利用Designer实现过登录框的ui文件，现在让我们将其导入之后实现一下其登录的逻辑（简单实现，不连接数据库）。此处无论是使用动态加载还是静态加载的方法都是一样的。

from PySide6.QtWidgets import QApplication,QWidget
from login import Ui_widget

class MyWeidget(QWidget):
    def __init__(self):
        super().__init__()
        self.ui = Ui_widget()
        self.ui.setupUi(self)
        # 这里的对象名要和Designer中的QObjectName对应
        self.ui.pushButton.clicked.connect(self.judgeUser)

    def judgeUser(self):
        account = self.ui.lineEdit.text()
        password = self.ui.lineEdit_2.text()
        if account=="123" and password=="123":
            print("登录成功")
        else:
            print("账号或密码错误")


if __name__ == '__main__':
    app = QApplication()
    window = MyWeidget()
    window.show()
    app.exec()

在这里插入图片描述

实战-计算器

我们实现一个简单的计算器界面如下，这里面的很多按键使用布局将它们排列整齐，然后给所有的控件都起一个合适的名字（QObjectName），这样方便我们在使用代码实现逻辑。

在这里插入图片描述

from PySide6.QtWidgets import QApplication,QWidget
from PySide6.QtUiTools import QUiLoader


class MyWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.ui = uiLoader.load(r"ui/计算器.ui")
        self.bind()
        self.result = ''

    def bind(self):
        self.ui.pushButton_0.clicked.connect(lambda:self.addNumber('0'))
        self.ui.pushButton_1.clicked.connect(lambda:self.addNumber('1'))
        self.ui.pushButton_2.clicked.connect(lambda:self.addNumber('2'))
        self.ui.pushButton_3.clicked.connect(lambda:self.addNumber('3'))
        self.ui.pushButton_4.clicked.connect(lambda:self.addNumber('4'))
        self.ui.pushButton_5.clicked.connect(lambda:self.addNumber('5'))
        self.ui.pushButton_6.clicked.connect(lambda:self.addNumber('6'))
        self.ui.pushButton_7.clicked.connect(lambda:self.addNumber('7'))
        self.ui.pushButton_8.clicked.connect(lambda:self.addNumber('8'))
        self.ui.pushButton_9.clicked.connect(lambda:self.addNumber('9'))
        self.ui.pushButton_dot.clicked.connect(lambda:self.addNumber('.'))
        self.ui.pushButton_add.clicked.connect(lambda:self.addNumber('+'))
        self.ui.pushButton_min.clicked.connect(lambda:self.addNumber('-'))
        self.ui.pushButton_mul.clicked.connect(lambda:self.addNumber('*'))
        self.ui.pushButton_div.clicked.connect(lambda :self.addNumber('/'))
        self.ui.pushButton_equal.clicked.connect(self.equal)
        self.ui.pushButton_clear.clicked.connect(self.clear)
        self.ui.pushButton_back.clicked.connect(self.back)


    def addNumber(self,num):
        self.ui.textEdit.clear()
        self.result+=num
        self.ui.textEdit.setText(self.result)

    def equal(self):
        self.numresult = eval(self.result)
        self.ui.textEdit.setText(str(self.numresult))

    def clear(self):
        self.result = ''
        self.ui.textEdit.clear()

    def back(self):
        self.ui.textEdit.clear()
        self.result = self.result[:-1]
        self.ui.textEdit.setText(self.result)

if __name__ == '__main__':
    uiLoader = QUiLoader()
    app = QApplication()
    window = MyWindow()
    window.ui.show()
    app.exec()