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，所以沒有進行很深入的調整，主要展示側邊欄，大家見諒~

　　歡迎交流！