diff --git a/.settings/org.eclipse.core.resources.prefs b/.settings/org.eclipse.core.resources.prefs index 404e3ce..ba8eaf1 100644 --- a/.settings/org.eclipse.core.resources.prefs +++ b/.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 diff --git a/README.md b/README.md index 88fa5aa..c4603c2 100644 --- a/README.md +++ b/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练习/) diff --git a/左侧选项卡/LeftTabWidget.py b/左侧选项卡/LeftTabWidget.py new file mode 100644 index 0000000..34b0ace --- /dev/null +++ b/左侧选项卡/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_()) diff --git a/左侧选项卡/README.md b/左侧选项卡/README.md new file mode 100644 index 0000000..8e1d719 --- /dev/null +++ b/左侧选项卡/README.md @@ -0,0 +1,10 @@ +# 选项卡 + +### [Python3.4.4 or Python3.5][PyQt5] + +### 1.方式一使用 （左边一个QListWidget + 右边QStackedWidget） + +详细注释在代码中 + +# 截图 +![截图](ScreenShot/1.gif) \ No newline at end of file diff --git a/左侧选项卡/ScreenShot/1.gif b/左侧选项卡/ScreenShot/1.gif new file mode 100644 index 0000000..fabeb55 Binary files /dev/null and b/左侧选项卡/ScreenShot/1.gif differ diff --git a/左侧选项卡/images/01.ico b/左侧选项卡/images/01.ico new file mode 100644 index 0000000..6b12545 Binary files /dev/null and b/左侧选项卡/images/01.ico differ diff --git a/左侧选项卡/images/02.ico b/左侧选项卡/images/02.ico new file mode 100644 index 0000000..cc66d2b Binary files /dev/null and b/左侧选项卡/images/02.ico differ diff --git a/左侧选项卡/images/03.ico b/左侧选项卡/images/03.ico new file mode 100644 index 0000000..6c7f8ef Binary files /dev/null and b/左侧选项卡/images/03.ico differ diff --git a/左侧选项卡/images/04.ico b/左侧选项卡/images/04.ico new file mode 100644 index 0000000..d4891f0 Binary files /dev/null and b/左侧选项卡/images/04.ico differ diff --git a/左侧选项卡/images/05.ico b/左侧选项卡/images/05.ico new file mode 100644 index 0000000..3353912 Binary files /dev/null and b/左侧选项卡/images/05.ico differ diff --git a/左侧选项卡/images/06.ico b/左侧选项卡/images/06.ico new file mode 100644 index 0000000..64c8fb1 Binary files /dev/null and b/左侧选项卡/images/06.ico differ diff --git a/左侧选项卡/images/07.ico b/左侧选项卡/images/07.ico new file mode 100644 index 0000000..8863871 Binary files /dev/null and b/左侧选项卡/images/07.ico differ diff --git a/左侧选项卡/images/08.ico b/左侧选项卡/images/08.ico new file mode 100644 index 0000000..cc741fb Binary files /dev/null and b/左侧选项卡/images/08.ico differ