PyQt：左侧选项卡

写在前面#

　　正在用pyqt写我们比赛项目的客户端，针对左侧选项卡，写了一个简单的demo。记录一下。

环境#

　　Python3.5.2

　　PyQt5

陈述#

　　用的结构是左边一个QListWidget + 右边QStackedWidget，将QWebView加在QStackedWidget上（因为打算用来展示一些charts，用的pyecharts做的数据可视化，生成的html文件，直接嵌入在客户端内，因此用QWebView来显示，关于pyecharts可以看我另外一篇文章https://www.cnblogs.com/jyroy/p/9446486.html）

　　我用的QSS来进行QListWidget的美化，做成类似网易云音乐的侧边栏的样子，我用的是QSS Editor写的QSS（强烈推荐，好用！！），py代码、QSS代码和效果展示如下

　　详细注释见代码

py代码如下#

#!/usr/bin/env python
# -*- coding:utf-8 -*-
# Author: jyroy
import sys

from PyQt5.QtCore import QUrl
from PyQt5.QtWebKitWidgets import QWebView
from PyQt5.QtWidgets import QApplication
from PyQt5.QtWidgets import QListWidget,QStackedWidget
from PyQt5.QtWidgets import QListWidgetItem
from PyQt5.QtWidgets import QWidget
from PyQt5.QtWidgets import QHBoxLayout

from PyQt5.QtCore import QSize, Qt



class LeftTabWidget(QWidget):
    '''左侧选项栏'''
    def __init__(self):
        super(LeftTabWidget, self).__init__()
        self.setObjectName('LeftTabWidget')

        self.setWindowTitle('LeftTabWidget')
        with open('D:/python/code/qt/test/QSS/QListWidgetQSS.qss', 'r') as f:   #导入QListWidget的qss样式
            self.list_style = f.read()

        self.main_layout = QHBoxLayout(self, spacing=0)     #窗口的整体布局
        self.main_layout.setContentsMargins(0,0,0,0)

        self.left_widget = QListWidget()     #左侧选项列表
        self.left_widget.setStyleSheet(self.list_style)
        self.main_layout.addWidget(self.left_widget)

        self.right_widget = QStackedWidget()
        self.main_layout.addWidget(self.right_widget)

        self._setup_ui()

    def _setup_ui(self):
        '''加载界面ui'''

        self.left_widget.currentRowChanged.connect(self.right_widget.setCurrentIndex)   #list和右侧窗口的index对应绑定

        self.left_widget.setFrameShape(QListWidget.NoFrame)    #去掉边框

        self.left_widget.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOff)  #隐藏滚动条
        self.left_widget.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)

        list_str = ['岗位需求','专业要求','薪水分布','城市分布']
        url_list = ['job_num_wordcloud.html', 'edu_need.html', 'salary_bar.html', 'edu_salary_bar.html']

        for i in range(4):
            self.item = QListWidgetItem(list_str[i],self.left_widget)   #左侧选项的添加
            self.item.setSizeHint(QSize(30,60))
            self.item.setTextAlignment(Qt.AlignCenter)                  #居中显示

            self.browser = QWebView()                                   #右侧用QWebView来显示html网页
            self.browser.setUrl(QUrl.fromLocalFile('D://python//code//vision//%s' % url_list[i]))
            self.right_widget.addWidget(self.browser)



def main():
    ''' '''
    app = QApplication(sys.argv)

    main_wnd = LeftTabWidget()
    main_wnd.show()

    app.exec()

if __name__ == '__main__':
    main()

QSS代码如下#

QListWidget, QListView, QTreeWidget, QTreeView {
    outline: 0px;
}

QListWidget {
    min-width: 120px;
    max-width: 120px;
    color: Black;
    background: #F5F5F5;
}

QListWidget::Item:selected {
    background: lightGray;
    border-left: 5px solid red;
}
HistoryPanel:hover {
    background: rgb(52, 52, 52);
}

效果展示#

写在后面#

　　因为只是写了一个demo，所以没有进行很深入的调整，主要展示侧边栏，大家见谅~

　　欢迎交流！

作者：JYRoy

出处：PyQt：左侧选项卡 - JYRoy - 博客园

本站使用「署名 4.0 国际」创作共享协议，转载请在文章明显位置注明作者及出处。

转载于：PyQt：左侧选项卡 - JYRoy - 博客园

左侧导航栏|左侧选项卡实例