左侧选项卡

.settings/org.eclipse.core.resources.prefs

@@ -48,6 +48,7 @@ encoding//\u591A\u7EBF\u7A0B\u4F7F\u7528/\u7EBF\u7A0B\u6302\u8D77\u6062\u590D.py
 encoding//\u5B57\u4F53\u6D4B\u8BD5/FontAwesome.py=utf-8
 encoding//\u5B57\u4F53\u6D4B\u8BD5/TestFontAwesome.py=utf-8
 encoding//\u5B57\u4F53\u6D4B\u8BD5/TestFontRoboto.py=utf-8
+encoding//\u5DE6\u4FA7\u9009\u9879\u5361/LeftTabWidget.py=utf-8
 encoding//\u6570\u636E\u5E93\u67E5\u8BE2\u663E\u793A\u8868\u683C/main.py=utf-8
 encoding//\u6570\u636E\u5E93\u67E5\u8BE2\u663E\u793A\u8868\u683C/mainui.py=utf-8
 encoding//\u65E0\u8FB9\u6846\u81EA\u5B9A\u4E49\u6807\u9898\u680F\u7A97\u53E3/FramelessWindow.py=utf-8

README.md

@@ -40,6 +40,7 @@
      - [1.28.2 py转pyd](C和C++扩展/py转pyd/)
      - [1.28.3 pydext](C和C++扩展/pydext/)
  - [1.29 数据库查询显示表格](数据库查询显示表格/)
+ - [1.30 左侧选项卡](左侧选项卡/)
 
 
 ### [2.QGraphicsView练习](QGraphicsView练习/)

左侧选项卡/LeftTabWidget.py

@@ -0,0 +1,110 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+from random import randint
+
+from PyQt5.QtCore import Qt, QSize
+from PyQt5.QtGui import QIcon
+from PyQt5.QtWidgets import QWidget, QListWidget, QStackedWidget, QHBoxLayout,\
+    QListWidgetItem, QLabel
+
+
+# Created on 2018年5月29日
+# author: Irony
+# site: https://github.com/892768447
+# email: 892768447@qq.com
+# file: LeftTabWidget
+# description:
+__Author__ = """By: Irony
+QQ: 892768447
+Email: 892768447@qq.com"""
+__Copyright__ = 'Copyright (c) 2018 Irony'
+__Version__ = 1.0
+
+
+class LeftTabWidget(QWidget):
+
+    def __init__(self, *args, **kwargs):
+        super(LeftTabWidget, self).__init__(*args, **kwargs)
+        self.resize(800, 600)
+        #左右布局(左边一个QListWidget + 右边QStackedWidget)
+        layout = QHBoxLayout(self, spacing=0)
+        layout.setContentsMargins(0, 0, 0, 0)
+        # 左侧列表
+        self.listWidget = QListWidget(self)
+        layout.addWidget(self.listWidget)
+        # 右侧层叠窗口
+        self.stackedWidget = QStackedWidget(self)
+        layout.addWidget(self.stackedWidget)
+        self.initUi()
+
+    def initUi(self):
+        # 初始化界面
+        # 通过QListWidget的当前item变化来切换QStackedWidget中的序号
+        self.listWidget.currentRowChanged.connect(
+            self.stackedWidget.setCurrentIndex)
+        # 去掉边框
+        self.listWidget.setFrameShape(QListWidget.NoFrame)
+        # 隐藏滚动条
+        self.listWidget.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
+        self.listWidget.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
+        # 这里就用一般的文本配合图标模式了(也可以直接用Icon模式,setViewMode)
+        for i in range(20):
+            item = QListWidgetItem(
+                QIcon('images/0%d.ico' % randint(1, 8)), str('选 项 %s' % i), self.listWidget)
+            # 设置item的默认宽高(这里只有高度比较有用)
+            item.setSizeHint(QSize(16777215, 60))
+            # 文字居中
+            item.setTextAlignment(Qt.AlignCenter)
+
+        # 再模拟20个右侧的页面(就不和上面一起循环放了)
+        for i in range(20):
+            label = QLabel('我是页面 %d' % i, self)
+            label.setAlignment(Qt.AlignCenter)
+            # 设置label的背景颜色(这里随机)
+            # 这里加了一个margin边距(方便区分QStackedWidget和QLabel的颜色)
+            label.setStyleSheet('background: rgb(%d, %d, %d);margin: 50px;' % (
+                randint(0, 255), randint(0, 255), randint(0, 255)))
+            self.stackedWidget.addWidget(label)
+
+
+# 美化样式表
+Stylesheet = """
+/*去掉item虚线边框*/
+QListWidget, QListView, QTreeWidget, QTreeView {
+    outline: 0px;
+}
+/*设置左侧选项的最小最大宽度,文字颜色和背景颜色*/
+QListWidget {
+    min-width: 120px;
+    max-width: 120px;
+    color: white;
+    background: black;
+}
+/*被选中时的背景颜色和左边框颜色*/
+QListWidget::item:selected {
+    background: rgb(52, 52, 52);
+    border-left: 2px solid rgb(9, 187, 7);
+}
+/*鼠标悬停颜色*/
+HistoryPanel::item:hover {
+    background: rgb(52, 52, 52);
+}
+
+/*右侧的层叠窗口的背景颜色*/
+QStackedWidget {
+    background: rgb(30, 30, 30);
+}
+/*模拟的页面*/
+QLabel {
+    color: white;
+}
+"""
+
+if __name__ == '__main__':
+    import sys
+    from PyQt5.QtWidgets import QApplication
+    app = QApplication(sys.argv)
+    app.setStyleSheet(Stylesheet)
+    w = LeftTabWidget()
+    w.show()
+    sys.exit(app.exec_())

左侧选项卡/README.md

@@ -0,0 +1,10 @@
+# 选项卡
+
+### [Python3.4.4 or Python3.5][PyQt5]
+
+### 1.方式一使用 （左边一个QListWidget + 右边QStackedWidget）
+
+详细注释在代码中
+
+# 截图
+![截图](ScreenShot/1.gif)