适用于pyqt的布局模板，界面简洁，扩展性强

z_d_g

已于 2024-02-01 19:08:20 修改

阅读量1.1k

点赞数 15

分类专栏： pyqt 文章标签： pyqt qt5

于 2024-02-01 12:05:18 首次发布

本文链接：https://blog.csdn.net/z_d_g/article/details/135969377

版权

pyqt 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

简介

最近在用pyqt进行软件开发，在查阅资料的过程中发现缺乏成熟的模板，大部分还是简单的布局，我自己制作了一个通用的布局模板，分享给大家使用，如果对你有帮助，希望可以给作者点赞或者关注。

最终效果

顶部为软件导航栏，左侧为一个可以滚动的菜单栏，右侧为主体内容，此模板为纯UI，并未书写任何功能代码。

提示：你可以在此基础上更改UI,添加功能，实现你想要达到的效果

全部代码（含注释）

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QDesktopWidget, QVBoxLayout, QHBoxLayout, QGridLayout, QLabel,\
    QPushButton, QScrollArea, QFrame
from PyQt5.QtGui import QPalette, QColor, QLinearGradient
import ctypes


class MainWindow(QWidget):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.setWindowTitle('布局模板')

        # 窗口配置（大小和位置）
        user32 = ctypes.windll.user32
        # 调用 GetSystemMetrics 函数获取屏幕分辨率
        screen_width = user32.GetSystemMetrics(0)
        screen_height = user32.GetSystemMetrics(1)
        self.resize(int(screen_width * 0.6), int(screen_height * 0.65))
        qr = self.frameGeometry()
        cp = QDesktopWidget().availableGeometry().center()
        qr.moveCenter(cp)
        self.background_color()

        # 总布局
        self.main_layout = QVBoxLayout()  # 创建主部件的垂直布局
        self.setLayout(self.main_layout)  # 设置窗口主部件布局

        self.top_widget = QWidget()
        self.top_widget.setFixedHeight(int(screen_height*0.06))
        self.top_layout = QHBoxLayout()
        self.top_widget.setLayout(self.top_layout)
        self.main_layout.addWidget(self.top_widget)

        self.top_widget2 = QWidget()
        self.top_widget2.setFixedHeight(40)
        self.top_layout2 = QHBoxLayout()
        self.top_widget2.setLayout(self.top_layout2)
        self.main_layout.addWidget(self.top_widget2)

        left_right_layout = QHBoxLayout()
        self.main_layout.addLayout(left_right_layout)

        self.left_widget = QWidget()
        self.left_widget.setFixedWidth(int(screen_width*0.15))
        self.left_layout = QVBoxLayout()
        self.left_widget.setLayout(self.left_layout)
        left_right_layout.addWidget(self.left_widget)

        self.right_widget = QWidget()
        self.right_layout = QVBoxLayout()
        self.right_widget.setLayout(self.right_layout)
        left_right_layout.addWidget(self.right_widget)

        # 标题和小型菜单
        self.title = QLabel('标题')
        self.title.setStyleSheet("color: white; font-size: 40px;font-family: Microsoft Yahei; margin-left: 50px")
        self.top_layout.addWidget(self.title, 1)
        self.top_layout.addStretch()

        button_qss = '''
            font-family:Microsoft Yahei;
            text-align:top;
            background: transparent;
            font-size:30px;
            margin-right: 50px;
            color: white;
            text-align:left;
        '''

        self.menu1 = QPushButton('菜单1')

        self.menu1.setStyleSheet(button_qss)

        self.top_layout.addWidget(self.menu1)

        self.menu2 = QPushButton('菜单2')

        self.menu2.setStyleSheet(button_qss)

        self.top_layout.addWidget(self.menu2)

        # 白色分割线
        horizontal_line = QFrame()
        horizontal_line.setStyleSheet('background: white;')
        horizontal_line.setFrameShape(QFrame.HLine)
        self.top_layout2.addWidget(horizontal_line, 1)

        scroll_qss = """
            QScrollArea {
                background-color: transparent;
                border: 0px; 
            }
            QScrollBar:vertical {
                background: grey;
                width: 15px;
                margin: 0px;
                border: none;
            }
                QScrollBar::handle:vertical {
                border-radius: 95px;  /* 设置圆角半径 */
            }
        """

        # 定义左侧滚动区域
        scroll_area = QScrollArea()
        scroll_area.setWidgetResizable(True)  # 允许调整窗口大小
        scroll_area.viewport().setStyleSheet("background-color: transparent;")
        scroll_area.setStyleSheet(scroll_qss)
        self.left_layout.addWidget(scroll_area)
        scroll_widget = QWidget(scroll_area)
        scroll_area.setWidget(scroll_widget)
        self.button_layout = QVBoxLayout(scroll_widget)
        self.button_layout.setSpacing(5)

        self.button_list_qss = '''
            QPushButton {
            font-family:Microsoft Yahei;
            background: transparent;
            font-size:30px;
            margin-right: 5px;
            color: lightGray;
            text-align: left;  
            padding-left: 45px;
            padding-top: 20px;
            padding-bottom: 20px;
            }
            QPushButton:hover {
            font-family:Microsoft Yahei;
            text-align:left;
            background:  rgba(65, 105, 225, 75%);
            font-size:30px;
            margin-right: 5px;
            color: white;
            padding-left: 45px;
            padding-top: 22px;
            padding-bottom: 22px;
            border-radius: 15px;
            }
        '''
        self.button_list_qss_selected = '''
            font-family:Microsoft Yahei;
            text-align:left;
            background: RoyalBlue;
            font-size:30px;
            margin-right: 5px;
            color: white;
            padding-left: 45px;
            padding-top: 22px;
            padding-bottom: 22px;
            border-radius: 15px;
        '''
        # 添加左侧菜单
        self.button_list = []
        for i in range(25):
            button = QPushButton(f"button {i + 1}")
            button.setStyleSheet(self.button_list_qss)
            self.button_layout.addWidget(button)
            self.button_list.append(button)
            button.clicked.connect(self.change_button_status)
        self.button_layout.addStretch()

        # 定义右侧区域
        content_layout1 = QHBoxLayout()
        self.right_layout.addLayout(content_layout1)
        content_layout2 = QHBoxLayout()
        self.right_layout.addLayout(content_layout2)

        # 添加右侧元素
        label1 = QLabel('这是右侧区域的内容(第一行)')
        label1.setStyleSheet("color: white; font-size: 30px;font-family: Microsoft Yahei; margin-left: 50px")
        content_layout1.addWidget(label1)

        label2 = QLabel('这是右侧区域的内容(第二行)')
        label2.setStyleSheet("color: white; font-size: 30px;font-family: Microsoft Yahei; margin-left: 50px")
        content_layout2.addWidget(label2)

        self.right_layout.addStretch()

    def change_button_status(self, selected):
        sender = app.sender()
        for button in self.button_list:
            if button == sender:
                # 选中的按钮改变背景色为红色
                button.setStyleSheet(self.button_list_qss_selected)
            else:
                # 其他按钮保持默认颜色
                button.setStyleSheet(self.button_list_qss)

    def background_color(self):
        # 设置背景色为渐变色
        palette = QPalette()
        gradient = QLinearGradient(0, 0, self.width(), self.height())
        gradient.setColorAt(0, QColor(28, 28, 28))
        gradient.setColorAt(1, QColor(58, 58, 58))
        palette.setBrush(QPalette.Background, gradient)
        self.setPalette(palette)


if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = MainWindow()
    window.show()
    sys.exit(app.exec())