多页面

多页面/QScrollArea/仿QQ设置面板/style.qss → QScrollArea/Data/style.qss

@@ -1,77 +1,77 @@
-/*左侧*/
-#listWidget {
-    outline: 0px;
-    max-width: 165px;
-    background-color: rgb(240, 240, 240);
-}
-
-#listWidget::item {
-    min-height: 45px;
-}
-
-#listWidget::item:hover {
-    background-color: rgb(225, 230, 235);
-}
-
-#listWidget::item:selected {
-    color: black;
-    background-color: rgb(255, 255, 255);
-}
-
-/*右侧*/
-#titleLabel1,#titleLabel2,#titleLabel3,#titleLabel4,#titleLabel5,#titleLabel6,#titleLabel7,#titleLabel8 {
-    min-width: 75px;
-    max-width: 75px;
-}
-
-#right1,#right2,#right3,#right4,#right5,#right6 {
-    margin-left: 25px;
-    color: rgb(128, 128, 128);
-}
-
-/*所有按钮*/
-QPushButton {
-    max-width: 80px;
-    max-height: 24px;
-    min-height: 24px;
-    border-radius: 3px;
-    background-color: rgb(244, 244, 244);
-    border: 1px solid rgb(167, 167, 167);
-}
-QPushButton:hover {
-    background-color: rgb(190, 231, 253);
-}
-QPushButton:pressed {
-    background-color: rgb(244, 244, 244);
-}
-
-QComboBox {
-    max-width: 80px;
-    max-height: 20px;
-    min-height: 20px;
-}
-
-QComboBox {
-    border: 1px solid rgb(167, 167, 167);
-    border-radius: 3px;
-}
-
-#listWidgetUser {
-    min-width: 290px;
-    max-width: 290px;
-    max-height: 120px;
-    min-height: 120px;
-    border-radius: 2px;
-    border: 1px solid rgb(227, 236, 242);
-    background-color: rgb(244, 250, 253);
-}
-
-QScrollBar::vertical {
-    background: rgb(178, 178, 178);
-    border: -5px solid grey;
-    margin: 0px 0px 0px 0px;
-    width: 10px;
-}
-QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
-    background: white;
+/*左侧*/
+#listWidget {
+    outline: 0px;
+    max-width: 165px;
+    background-color: rgb(240, 240, 240);
+}
+
+#listWidget::item {
+    min-height: 45px;
+}
+
+#listWidget::item:hover {
+    background-color: rgb(225, 230, 235);
+}
+
+#listWidget::item:selected {
+    color: black;
+    background-color: rgb(255, 255, 255);
+}
+
+/*右侧*/
+#titleLabel1,#titleLabel2,#titleLabel3,#titleLabel4,#titleLabel5,#titleLabel6,#titleLabel7,#titleLabel8 {
+    min-width: 75px;
+    max-width: 75px;
+}
+
+#right1,#right2,#right3,#right4,#right5,#right6 {
+    margin-left: 25px;
+    color: rgb(128, 128, 128);
+}
+
+/*所有按钮*/
+QPushButton {
+    max-width: 80px;
+    max-height: 24px;
+    min-height: 24px;
+    border-radius: 3px;
+    background-color: rgb(244, 244, 244);
+    border: 1px solid rgb(167, 167, 167);
+}
+QPushButton:hover {
+    background-color: rgb(190, 231, 253);
+}
+QPushButton:pressed {
+    background-color: rgb(244, 244, 244);
+}
+
+QComboBox {
+    max-width: 80px;
+    max-height: 20px;
+    min-height: 20px;
+}
+
+QComboBox {
+    border: 1px solid rgb(167, 167, 167);
+    border-radius: 3px;
+}
+
+#listWidgetUser {
+    min-width: 290px;
+    max-width: 290px;
+    max-height: 120px;
+    min-height: 120px;
+    border-radius: 2px;
+    border: 1px solid rgb(227, 236, 242);
+    background-color: rgb(244, 250, 253);
+}
+
+QScrollBar::vertical {
+    background: rgb(178, 178, 178);
+    border: -5px solid grey;
+    margin: 0px 0px 0px 0px;
+    width: 10px;
+}
+QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
+    background: white;
 }

多页面/QScrollArea/仿QQ设置面板/仿QQ设置面板.py → QScrollArea/QQSettingPanel.py

@@ -2,15 +2,16 @@
 # -*- coding: utf-8 -*-
 from PyQt5.QtWidgets import QWidget
 
-from SettingUi import Ui_Setting  # @UnresolvedImport
+from Lib.SettingUi import Ui_Setting  # @UnresolvedImport
 
 
 # Created on 2018年3月28日
 # author: Irony
 # site: https://pyqt5.com, https://github.com/892768447
 # email: [email protected]
-# file: 仿QQ设置面板.Window
+# file: QQSettingPanel
 # description:
+
 __Author__ = """By: Irony
 QQ: 892768447
 Email: [email protected]"""
@@ -60,7 +61,7 @@ def onItemClicked(self, item):
     import sys
     from PyQt5.QtWidgets import QApplication
     app = QApplication(sys.argv)
-    app.setStyleSheet(open("style.qss", "rb").read().decode("utf-8"))
+    app.setStyleSheet(open("Data/style.qss", "rb").read().decode("utf-8"))
     w = Window()
     w.show()
     sys.exit(app.exec_())

QScrollArea/README.md

@@ -0,0 +1,17 @@
+# QScrollArea
+
+## 1、仿QQ设置面板
+[运行 QQSettingPanel.py](QQSettingPanel.py)
+
+1. 左侧为`QListWidget`，右侧使用`QScrollArea`设置`QVBoxLayout`，然后依次往里面添加QWidget
+2. 右侧添加`QWidget`的时候有两种方案
+    1. 左侧list根据序号来索引，右侧添加widget时给定带序号的变量名，如widget_0,widget_1,widget_2之类的，这样可以直接根据`QListWidget`的序号关联起来
+    2. 左侧list添加item时给定右侧对应的widget变量值
+
+相关事件：
+1. 绑定左侧`QListWidget`的`itemClicked`的到该item的索引
+2. 绑定右侧滚动条的`valueChanged`事件得到pos
+
+注意：当`itemClicked`时定位滚动条的值时，需要设置一个标志位用来避免`valueChanged`重复调用item的定位
+
+![QQSettingPanel](ScreenShot/QQSettingPanel.gif)

多页面/QStackedWidget/左侧选项卡/左侧选项卡.py → QStackedWidget/LeftTabStacked.py

@@ -50,7 +50,7 @@ def initUi(self):
         # 这里就用一般的文本配合图标模式了(也可以直接用Icon模式,setViewMode)
         for i in range(20):
             item = QListWidgetItem(
-                QIcon('images/0%d.ico' % randint(1, 8)), str('选 项 %s' % i), self.listWidget)
+                QIcon('Data/0%d.ico' % randint(1, 8)), str('选 项 %s' % i), self.listWidget)
             # 设置item的默认宽高(这里只有高度比较有用)
             item.setSizeHint(QSize(16777215, 60))
             # 文字居中
@@ -102,7 +102,7 @@ def initUi(self):
 
 if __name__ == '__main__':
     import sys
-    from PyQt5.QtWidgets import QApplication
+    from PyQt5.QtWidgets import QApplicationr
     app = QApplication(sys.argv)
     app.setStyleSheet(Stylesheet)
     w = LeftTabWidget()

QStackedWidget/README.md

@@ -0,0 +1,15 @@
+# QStackedWidget
+
+## 1、左侧选项卡
+[运行 LeftTabStacked.py](LeftTabStacked.py)
+
+本来使用`QTabWidget`可以实现多标签页面，但是当标签在左侧时会出现文字方向不对的问题，
+
+可以通过自定义`QTabBar`来解决，也可以采用`QListWidget`结合`QStackedWidget`的方式。
+
+1. 左侧为`QListWidget`，右侧使用`QStackedWidget`，然后依次往里面添加`QWidget`
+2. 右侧添加`QWidget`的时候有两种方案
+    1. 左侧list根据序号来索引，右侧添加widget时给定带序号的变量名，如widget_0,widget_1,widget_2之类的，这样可以直接根据`QListWidget`的序号关联起来
+    2. 左侧list添加item时给定右侧对应的widget变量值
+
+![LeftTabStacked](ScreenShot/LeftTabStacked.gif)