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コードは以下の通りです

 1 #!/usr/bin/env python
 2 # -*- coding:utf-8 -*-
 3 # Author: jyroy
 4 import sys
 5 
 6 from PyQt5.QtCore import QUrl
 7 from PyQt5.QtWebKitWidgets import QWebView
 8 from PyQt5.QtWidgets import QApplication
 9 from PyQt5.QtWidgets import QListWidget,QStackedWidget
10 from PyQt5.QtWidgets import QListWidgetItem
11 from PyQt5.QtWidgets import QWidget
12 from PyQt5.QtWidgets import QHBoxLayout
13 
14 from PyQt5.QtCore import QSize, Qt
15 
16 
17 
18 class LeftTabWidget(QWidget):
19     '''     '''
20     def __init__(self):
21         super(LeftTabWidget, self).__init__()
22         self.setObjectName('LeftTabWidget')
23         
24         self.setWindowTitle('LeftTabWidget')
25         with open('D:/python/code/qt/test/QSS/QListWidgetQSS.qss', 'r') as f:   #  QListWidget qss  
26             self.list_style = f.read()
27 
28         self.main_layout = QHBoxLayout(self, spacing=0)     #       
29         self.main_layout.setContentsMargins(0,0,0,0)
30 
31         self.left_widget = QListWidget()     #      
32         self.left_widget.setStyleSheet(self.list_style)
33         self.main_layout.addWidget(self.left_widget)
34 
35         self.right_widget = QStackedWidget()
36         self.main_layout.addWidget(self.right_widget)
37 
38         self._setup_ui()
39 
40     def _setup_ui(self):
41         '''    ui'''
42 
43         self.left_widget.currentRowChanged.connect(self.right_widget.setCurrentIndex)   #list      index    
44 
45         self.left_widget.setFrameShape(QListWidget.NoFrame)    #    
46 
47         self.left_widget.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOff)  #     
48         self.left_widget.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
49 
50         list_str = ['    ','    ','    ','    ']
51         url_list = ['job_num_wordcloud.html', 'edu_need.html', 'salary_bar.html', 'edu_salary_bar.html']
52 
53         for i in range(4):
54             self.item = QListWidgetItem(list_str[i],self.left_widget)   #       
55             self.item.setSizeHint(QSize(30,60))
56             self.item.setTextAlignment(Qt.AlignCenter)                  #    
57 
58             self.browser = QWebView()                                   #   QWebView   html  
59             self.browser.setUrl(QUrl.fromLocalFile('D://python//code//vision//%s' % url_list[i]))
60             self.right_widget.addWidget(self.browser)
61 
62 
63 
64 def main():
65     ''' '''
66     app = QApplication(sys.argv)
67 
68     main_wnd = LeftTabWidget()
69     main_wnd.show()
70 
71     app.exec()
72 
73 if __name__ == '__main__':
74     main()

 
QSSコードは以下の通り

 1 QListWidget, QListView, QTreeWidget, QTreeView {
 2     outline: 0px;
 3 }
 4 
 5 QListWidget {
 6     min-width: 120px;
 7     max-width: 120px;
 8     color: Black;
 9     background: #F5F5F5;
10 }
11 
12 QListWidget::Item:selected {
13     background: lightGray;
14     border-left: 5px solid red;
15 }
16 HistoryPanel:hover {
17     background: rgb(52, 52, 52);
18 }

 
 
効果の表示
 
　　
あとに書く
デモを1つ書いただけなので、深く調整はしていませんが、主にサイドバーを展示していますので、ご了承ください~
交流を歓迎します!