Qt第四十九章：手写窗口（一、基本模板）

水深无声 2024-03-30 12:28 78阅读 0赞

**目录**

一、基本UI类

二、基本逻辑类

三、QSS

四、预览

--------------------

**手写窗口是每个Qt程序员的最终归宿**。可不能像新手一样一直使用Qt designer去设计窗口。这里我说一下手写窗口的流程：**基本思想是忽略Qt本身的自带背景，在其基础上添加一个QWidget作为窗口的背景板，后面所有的UI控件都在这个背景板上搞**。

#### 一、基本UI类 ####

from PySide6.QtGui import QPixmap
    from PySide6.QtWidgets import QWidget, QVBoxLayout, QApplication, QPushButton
    
    
    class UiTurnWidget(object):
        def setup_ui(self, parent: QWidget):
            # 加载QSS文件
            with open("./turn_widget.css", "r", encoding="UTF-8") as f:
                parent.setStyleSheet(f.read())
            # 设置窗口初始大小 TODO
            parent.resize(500, 300)
            # 设置窗口标题 TODO
            parent.setWindowTitle("测试页面")
            # 设置窗口图标 TODO
            parent.setWindowIcon(QPixmap(":/message/icons/success-fill-32.png"))
            # 设置水平布局
            root_layout = QVBoxLayout()
            parent.setLayout(root_layout)
            # 去掉边距
            root_layout.setContentsMargins(0, 0, 0, 0)
            # 创建背景板
            self.bg_widget = QWidget(parent)
            self.bg_widget.setObjectName('bg_widget')
            root_layout.addWidget(self.bg_widget)
            """
            设计UI TODO
            """
            # 1.背景板垂直布局
            self.bg_layout = QVBoxLayout()
            self.bg_widget.setLayout(self.bg_layout)
            # 2.放置两个控件
            self.bg_layout.addWidget(QPushButton("OK"))
            self.bg_layout.addWidget(QPushButton("Cancel"))

#### 二、基本逻辑类 ####

class TurnWidget(QWidget, UiTurnWidget):
        def __init__(self, parent=None):
            super(TurnWidget, self).__init__(parent=parent)
            self.setup_ui(self)
            """
            逻辑 TODO
            """

#### 三、QSS ####

QWidget#bg_widget {
        background-color: #1296db;
    }

#### 四、预览 ####

if __name__ == '__main__':
        app = QApplication([])
        widget = TurnWidget()
        widget.show()
        app.exec()

![84b94b552f7c4c2d90903a2addb40147.png][]

[84b94b552f7c4c2d90903a2addb40147.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/490fe05f80594993830fe6389d9942ad.png