PyQt 界面设计入门基础 —— ①安装布局篇

colir0
637 阅读4分钟

目录

1. PyQt 界面设计入门基础 —— ② QtWidgets

2. PyQt 界面设计入门基础 —— ①安装布局篇

安装

本篇我安装的是 pyqt6 版本的，安装环境我选择是在conda环境下，主要是后面会结合机器学习实现一个目标检测，所以在安装之前的要是先将这个环境配置好。当然你也可以直接选择在本地。对于conda的安装配置，可以查看一下我之前的文章【YOLO小白】

# 安装命令
pip install pyside6 -i https://pypi.tuna.tsinghua.edu.cn/simple

pip install pyqt6-tools -i https://pypi.tuna.tsinghua.edu.cn/simple

资料：

这是从b站up主看到的一个很适合基础小白学习的教程

Layout布局

对于UI界面的开发，我们一般的思路就是先定框架

image.png

看下面这幅图，Central Widget 中央控件，这个我们UI设计的主要区域。

  • 首先需要创建一个应用程序
app = QtWidgets.QApplication()

app.exec()
  • 创建中央控件
window = QtWidgets.QMainWindow()
window.show()

合并一下

app = QtWidgets.QApplication()
window = QtWidgets.QMainWindow()
window.show()
app.exec()

接下来我们引入Layout布局

class MWindow(QtWidgets.QMainWindow):

    def __init__(self):

        super().__init__()
        self.resize(850, 600)


        # central Widget
        centralWidget = QtWidgets.QWidget(self)
        self.setCentralWidget(centralWidget)

        # central Widget 里面的 主 layout
        mainLayout = QtWidgets.QVBoxLayout(centralWidget)



if __name__ == "__main__":
    app = QtWidgets.QApplication()
    window = MWindow()
    window.show()
    app.exec()

image.png

对于布局，我们的布局又分为遂平布局和垂直布局 QVBoxLayout 用于垂直， QHBoxLayout 用于水平

接下来，我们基于上面的布局实现一下：

class MWindow(QtWidgets.QMainWindow):

    def __init__(self):

        super().__init__()
        self.resize(1200, 600)


        # central Widget
        centralWidget = QtWidgets.QWidget(self)
        self.setCentralWidget(centralWidget)

        # central Widget 里面的 主 layout 最外层是一个垂直布局
        mainLayout = QtWidgets.QVBoxLayout(centralWidget)

        # 1.1上层 我们做一个水平布局
        topLayout = QtWidgets.QHBoxLayout()

        # 1.2创建两个窗口
        self.test_window = QtWidgets.QLabel(self)
        self.result_window = QtWidgets.QLabel(self)

        # 1.3为了使我们看的边界更加明了，我们给窗口加一个边界样式
        """
        可以通过这两种形式修改样式
        styleSheet()
        setStyleSheet()
        """
        self.test_window.setStyleSheet("border:1px solid #558d71")
        self.result_window.setStyleSheet("border:1px solid #558d71")

        # 1.4完成新建的窗口默认都是最小的
        """
        然后窗口的大小默认也是最小的，所以我们要给他设置一个最小窗口大小
        setMinimumSize()
        """
        self.test_window.setMinimumSize(800,500)
        self.result_window.setMinimumSize(400,500)

        # 1.5将窗口添加到布局布局种
        topLayout.addWidget(self.test_window)
        topLayout.addWidget(self.result_window)

        # 1.6 将topLayout加入到mainLayout
        mainLayout.addLayout(topLayout)

可以看到外面将两个窗口放入水平布局的 QHBoxLayout 中，就是按水平进行布局的 image.png

接下来看一下垂直布局的效果

bottomLayout = QtWidgets.QVBoxLayout()
self.buttonBox1 = QtWidgets.QPushButton("按钮1")
self.buttonBox2 = QtWidgets.QPushButton("按钮2")
self.buttonBox3 = QtWidgets.QPushButton("按钮3")
bottomLayout.addWidget(self.buttonBox1)
bottomLayout.addWidget(self.buttonBox2)
bottomLayout.addWidget(self.buttonBox3)

mainLayout.addLayout(bottomLayout)

image.png

我们在上面用到了很多的属性方法，这些其实都不需要我们记忆，我们可以直接去查询官方文档即可，另外我根据b站up主给出的另外一个登录模板布局：4.布局2，将其作为基础，自己也写拓展了一个

登录模板布局

import sys
from PyQt6.QtCore import Qt
from PyQt6.QtGui import QPainter, QPixmap
from PyQt6.QtWidgets import QVBoxLayout, QFormLayout, QLineEdit, QPushButton, QApplication, QWidget, QGroupBox, QLabel


class MyWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.init_ui()

    def init_ui(self):
        # 设定当前Widget的宽高(可以拉伸大小)
        self.setFixedSize(600, 450)
        self.setWindowTitle("登录页")


        # 将表单和按钮都放入groupbox中，并给groupbox一个背景颜色
        groupbox = QGroupBox(self)
        groupbox.setStyleSheet("background-color: rgba(255, 255, 255, 0.5);")
        groupbox.setFixedSize(350, 150)
        groupbox.move(150, 150)

        # 外层容器
        container = QVBoxLayout(groupbox)
        # 标题
        title = QLabel("登录")
        title.setStyleSheet("font-size: 20px; font-weight: bold; color: #006400")

        # 表单
        login_form = self.form_layout()

        # 按钮
        login_btn = QPushButton("登录")
        login_btn.setFixedSize(45, 20)

        # 把按钮添加到容器中，并且指定它的对齐方式
        container.addWidget(title, alignment=Qt.AlignmentFlag.AlignCenter)
        container.addLayout(login_form)
        container.addWidget(login_btn, alignment=Qt.AlignmentFlag.AlignCenter)

    # 登录的form表单
    def form_layout(self):
        # 表单容器
        form_layout = QFormLayout()
        form_layout.setFormAlignment(Qt.AlignmentFlag.AlignCenter)

        # 创建1个输入框
        edit = QLineEdit()
        edit.setPlaceholderText("请输入账号")
        edit.setFixedSize(150, 20)
        form_layout.addRow("<b>账号：</b>", edit)

        # 创建另外1个输入框
        edit2 = QLineEdit()
        edit2.setPlaceholderText("请输入密码")
        edit2.setFixedSize(150, 20)
        form_layout.addRow("<b>密码：</b>", edit2)

        # 将form_layout添加到垂直布局器中
        return form_layout

    # 背景设置
    def paintEvent(self, event):
        painter = QPainter(self)
        pixmap = QPixmap("./image/home-login-bg.jpg").scaled(self.size(), Qt.AspectRatioMode.IgnoreAspectRatio)
        painter.setOpacity(0.95)  # 设置绘制时的透明度
        painter.drawPixmap(self.rect(), pixmap)  # 绘制淡化后的背景图片

        # 绘制其他控件
        super().paintEvent(event)

    def resizeEvent(self, event):
        super().resizeEvent(event)
        self.update()  # 窗口大小改变时更新背景

if __name__ == '__main__':
    app = QApplication(sys.argv)

    w = MyWindow()
    w.show()

    app.exec()

最后的效果也是比较简单的

image.png

avatar
文章
阅读
粉丝