Skip to content

P
PyQt Fluent Widgets

k54kdk / PyQt Fluent Widgets

通知 1
Star 0
Fork 0
P
PyQt Fluent Widgets
提交 a02ea848 编写于 作者: 之一Yo's avatar 之一Yo
浏览文件
操作

添加分段导航栏

上级 407839f7
展开全部 隐藏空白更改
内联 并排
Showing with 287677 addition and 287409 deletion
examples/gallery/app/resource/i18n/gallery.zh_CN.ts
浏览文件 @ a02ea848
......@@ -298,7 +298,7 @@
<context>
<name>ExampleCard</name>
<message>
<location filename="../../view/gallery_interface.py" line="114"/>
<location filename="../../view/gallery_interface.py" line="112"/>
<source>Source code</source>
<translation>源代码</translation>
</message>
......@@ -306,7 +306,7 @@
<context>
<name>IconCardView</name>
<message>
<location filename="../../view/icon_interface.py" line="123"/>
<location filename="../../view/icon_interface.py" line="124"/>
<source>Fluent Icons Library</source>
<translation>流畅图标库</translation>
</message>
......@@ -314,12 +314,12 @@
<context>
<name>IconInfoPanel</name>
<message>
<location filename="../../view/icon_interface.py" line="81"/>
<location filename="../../view/icon_interface.py" line="82"/>
<source>Icon name</source>
<translation>图标名字</translation>
</message>
<message>
<location filename="../../view/icon_interface.py" line="83"/>
<location filename="../../view/icon_interface.py" line="84"/>
<source>Enum member</source>
<translation>枚举成员</translation>
</message>
......@@ -390,7 +390,7 @@
<context>
<name>LineEdit</name>
<message>
<location filename="../../view/icon_interface.py" line="21"/>
<location filename="../../view/icon_interface.py" line="22"/>
<source>Search icons</source>
<translation>搜索图标</translation>
</message>
......@@ -734,21 +734,26 @@
<source>A basic pivot</source>
<translation>顶部导航栏</translation>
</message>
<message>
<location filename="../../view/navigation_view_interface.py" line="28"/>
<source>A segmented control</source>
<translation>分段导航栏</translation>
</message>
</context>
<context>
<name>PivotInterface</name>
<message>
<location filename="../../view/navigation_view_interface.py" line="45"/>
<location filename="../../view/navigation_view_interface.py" line="53"/>
<source>Song</source>
<translation>歌曲</translation>
</message>
<message>
<location filename="../../view/navigation_view_interface.py" line="46"/>
<location filename="../../view/navigation_view_interface.py" line="54"/>
<source>Album</source>
<translation>专辑</translation>
</message>
<message>
<location filename="../../view/navigation_view_interface.py" line="47"/>
<location filename="../../view/navigation_view_interface.py" line="55"/>
<source>Artist</source>
<translation>歌手</translation>
</message>
......@@ -1254,27 +1259,27 @@
<context>
<name>ToolBar</name>
<message>
<location filename="../../view/gallery_interface.py" line="41"/>
<location filename="../../view/gallery_interface.py" line="42"/>
<source>Documentation</source>
<translation>在线文档</translation>
</message>
<message>
<location filename="../../view/gallery_interface.py" line="43"/>
<location filename="../../view/gallery_interface.py" line="44"/>
<source>Source</source>
<translation>源代码</translation>
</message>
<message>
<location filename="../../view/gallery_interface.py" line="80"/>
<location filename="../../view/gallery_interface.py" line="81"/>
<source>Toggle theme</source>
<translation>切换主题</translation>
</message>
<message>
<location filename="../../view/gallery_interface.py" line="82"/>
<location filename="../../view/gallery_interface.py" line="83"/>
<source>Send feedback</source>
<translation>提供反馈</translation>
</message>
<message>
<location filename="../../view/gallery_interface.py" line="81"/>
<location filename="../../view/gallery_interface.py" line="82"/>
<source>Support me</source>
<translation>支持作者🥰</translation>
</message>
......
examples/gallery/app/resource/i18n/gallery.zh_HK.ts
浏览文件 @ a02ea848
......@@ -298,7 +298,7 @@
<context>
<name>ExampleCard</name>
<message>
<location filename="../../view/gallery_interface.py" line="114"/>
<location filename="../../view/gallery_interface.py" line="112"/>
<source>Source code</source>
<translation>原始碼</translation>
</message>
......@@ -306,7 +306,7 @@
<context>
<name>IconCardView</name>
<message>
<location filename="../../view/icon_interface.py" line="123"/>
<location filename="../../view/icon_interface.py" line="124"/>
<source>Fluent Icons Library</source>
<translation>流暢圖標庫</translation>
</message>
......@@ -314,12 +314,12 @@
<context>
<name>IconInfoPanel</name>
<message>
<location filename="../../view/icon_interface.py" line="81"/>
<location filename="../../view/icon_interface.py" line="82"/>
<source>Icon name</source>
<translation>圖標名字</translation>
</message>
<message>
<location filename="../../view/icon_interface.py" line="83"/>
<location filename="../../view/icon_interface.py" line="84"/>
<source>Enum member</source>
<translation>枚舉成員</translation>
</message>
......@@ -390,7 +390,7 @@
<context>
<name>LineEdit</name>
<message>
<location filename="../../view/icon_interface.py" line="21"/>
<location filename="../../view/icon_interface.py" line="22"/>
<source>Search icons</source>
<translation>搜索圖標</translation>
</message>
......@@ -734,21 +734,26 @@
<source>A basic pivot</source>
<translation>頂部導航欄</translation>
</message>
<message>
<location filename="../../view/navigation_view_interface.py" line="28"/>
<source>A segmented control</source>
<translation>分段導航欄</translation>
</message>
</context>
<context>
<name>PivotInterface</name>
<message>
<location filename="../../view/navigation_view_interface.py" line="45"/>
<location filename="../../view/navigation_view_interface.py" line="53"/>
<source>Song</source>
<translation>歌曲</translation>
</message>
<message>
<location filename="../../view/navigation_view_interface.py" line="46"/>
<location filename="../../view/navigation_view_interface.py" line="54"/>
<source>Album</source>
<translation>專輯</translation>
</message>
<message>
<location filename="../../view/navigation_view_interface.py" line="47"/>
<location filename="../../view/navigation_view_interface.py" line="55"/>
<source>Artist</source>
<translation>歌手</translation>
</message>
......@@ -1254,27 +1259,27 @@
<context>
<name>ToolBar</name>
<message>
<location filename="../../view/gallery_interface.py" line="41"/>
<location filename="../../view/gallery_interface.py" line="42"/>
<source>Documentation</source>
<translation>在線文檔</translation>
</message>
<message>
<location filename="../../view/gallery_interface.py" line="43"/>
<location filename="../../view/gallery_interface.py" line="44"/>
<source>Source</source>
<translation>原始碼</translation>
</message>
<message>
<location filename="../../view/gallery_interface.py" line="80"/>
<location filename="../../view/gallery_interface.py" line="81"/>
<source>Toggle theme</source>
<translation>切換主題</translation>
</message>
<message>
<location filename="../../view/gallery_interface.py" line="82"/>
<location filename="../../view/gallery_interface.py" line="83"/>
<source>Send feedback</source>
<translation>提供反饋</translation>
</message>
<message>
<location filename="../../view/gallery_interface.py" line="81"/>
<location filename="../../view/gallery_interface.py" line="82"/>
<source>Support me</source>
<translation>支持作者🥰</translation>
</message>
......
examples/gallery/app/view/navigation_view_interface.py
浏览文件 @ a02ea848
# coding:utf-8
from PyQt5.QtCore import Qt, QEasingCurve
from PyQt5.QtWidgets import QWidget, QStackedWidget, QVBoxLayout, QLabel
from qfluentwidgets import Pivot, qrouter
from qfluentwidgets import Pivot, qrouter, SegmentedWidget
from .gallery_interface import GalleryInterface
from ..common.translator import Translator
......@@ -25,15 +25,23 @@ class NavigationViewInterface(GalleryInterface):
sourcePath='https://github.com/zhiyiYo/PyQt-Fluent-Widgets/blob/master/examples/pivot/demo.py'
)
self.addExampleCard(
title=self.tr('A segmented control'),
widget=SegmentedInterface(self),
sourcePath='https://github.com/zhiyiYo/PyQt-Fluent-Widgets/blob/master/examples/pivot/demo.py'
)
class PivotInterface(QWidget):
""" Pivot interface """
Nav = Pivot
def __init__(self, parent=None):
super().__init__(parent=parent)
self.setFixedSize(300, 200)
self.pivot = Pivot(self)
self.pivot = self.Nav(self)
self.stackedWidget = QStackedWidget(self)
self.vBoxLayout = QVBoxLayout(self)
......@@ -70,4 +78,14 @@ class PivotInterface(QWidget):
def onCurrentIndexChanged(self, index):
widget = self.stackedWidget.widget(index)
self.pivot.setCurrentItem(widget.objectName())
qrouter.push(self.stackedWidget, widget.objectName())
\ No newline at end of file
qrouter.push(self.stackedWidget, widget.objectName())
class SegmentedInterface(PivotInterface):
Nav = SegmentedWidget
def __init__(self, parent=None):
super().__init__(parent)
self.vBoxLayout.removeWidget(self.pivot)
self.vBoxLayout.insertWidget(0, self.pivot)
examples/setmented_widget/demo.py 0 → 100644
浏览文件 @ a02ea848
# coding:utf-8
import sys
from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import QApplication, QWidget, QStackedWidget, QVBoxLayout, QLabel, QSizePolicy
from qfluentwidgets import Pivot, setTheme, Theme, SegmentedWidget, FluentIcon
class Demo(QWidget):
def __init__(self):
super().__init__()
# setTheme(Theme.DARK)
self.setStyleSheet("""
Demo{background: white}
QLabel{
font: 20px 'Segoe UI';
background: rgb(242,242,242);
border-radius: 8px;
}
""")
self.resize(400, 400)
self.pivot = SegmentedWidget(self)
self.stackedWidget = QStackedWidget(self)
self.vBoxLayout = QVBoxLayout(self)
self.songInterface = QLabel('Song Interface', self)
self.albumInterface = QLabel('Album Interface', self)
self.artistInterface = QLabel('Artist Interface', self)
# add items to pivot
self.addSubInterface(self.songInterface, 'songInterface', 'Song')
self.addSubInterface(self.albumInterface, 'albumInterface', 'Album')
self.addSubInterface(self.artistInterface, 'artistInterface', 'Artist')
self.vBoxLayout.addWidget(self.pivot)
self.vBoxLayout.addWidget(self.stackedWidget)
self.vBoxLayout.setContentsMargins(30, 10, 30, 30)
self.stackedWidget.currentChanged.connect(self.onCurrentIndexChanged)
self.stackedWidget.setCurrentWidget(self.songInterface)
self.pivot.setCurrentItem(self.songInterface.objectName())
def addSubInterface(self, widget: QLabel, objectName, text):
widget.setObjectName(objectName)
widget.setAlignment(Qt.AlignCenter)
self.stackedWidget.addWidget(widget)
self.pivot.addItem(
routeKey=objectName,
text=text,
onClick=lambda: self.stackedWidget.setCurrentWidget(widget),
)
def onCurrentIndexChanged(self, index):
widget = self.stackedWidget.widget(index)
self.pivot.setCurrentItem(widget.objectName())
if __name__ == '__main__':
# enable dpi scale
QApplication.setHighDpiScaleFactorRoundingPolicy(Qt.HighDpiScaleFactorRoundingPolicy.PassThrough)
QApplication.setAttribute(Qt.AA_EnableHighDpiScaling)
QApplication.setAttribute(Qt.AA_UseHighDpiPixmaps)
app = QApplication(sys.argv)
w = Demo()
w.show()
app.exec_()
\ No newline at end of file
qfluentwidgets/_rc/qss/dark/pivot.qss
浏览文件 @ a02ea848
......@@ -18,6 +18,16 @@ PivotItem[isSelected=false]:pressed {
color: rgba(255, 255, 255, 0.75);
}
PivotItem[hasIcon=false] {
padding-left: 12px;
padding-right: 12px;
}
PivotItem[hasIcon=true] {
padding-left: 36px;
padding-right: 12px;
}
Pivot {
border: none;
background-color: transparent;
......@@ -25,4 +35,44 @@ Pivot {
#view {
background-color: transparent;
}
SegmentedWidget {
background-color: rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 6px;
}
SegmentedItem[isSelected=false] {
padding-top: 3px;
padding-bottom: 3px;
background-color: transparent;
border: none;
border-radius: 6px;
margin: 3px 2px;
}
SegmentedItem[isSelected=false]:hover {
background-color: rgba(255, 255, 255, 9);
}
SegmentedItem[isSelected=false]:pressed {
background-color: rgba(255, 255, 255, 6);
margin: 3px 4px 3px 4px;
}
SegmentedItem[isSelected=true] {
padding-top: 5px;
padding-bottom: 5px;
background-color: rgba(255, 255, 255, 0.0605);
border: 1px solid rgba(255, 255, 255, 0.053);
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 6px;
margin: 0px;
color: white;
}
SegmentedItem[isSelected=true]:hover,
SegmentedItem[isSelected=true]:pressed {
color: white;
}
\ No newline at end of file
qfluentwidgets/_rc/qss/light/pivot.qss
浏览文件 @ a02ea848
......@@ -19,6 +19,16 @@ PivotItem[isSelected=false]:pressed {
color: rgba(0, 0, 0, 0.75);
}
PivotItem[hasIcon=false] {
padding-left: 12px;
padding-right: 12px;
}
PivotItem[hasIcon=true] {
padding-left: 36px;
padding-right: 12px;
}
Pivot {
border: none;
background-color: transparent;
......@@ -26,4 +36,44 @@ Pivot {
#view {
background-color: transparent;
}
SegmentedWidget {
background-color: rgba(0, 0, 0, 0.0241);
border: 1px solid rgba(0, 0, 0, 0.0578);
border-radius: 6px;
}
SegmentedItem[isSelected=false] {
padding-top: 3px;
padding-bottom: 3px;
background-color: transparent;
border: none;
border-radius: 6px;
margin: 3px 2px;
}
SegmentedItem[isSelected=false]:hover {
background-color: rgba(0, 0, 0, 9);
}
SegmentedItem[isSelected=false]:pressed {
background-color: rgba(0, 0, 0, 6);
margin: 3px 4px 3px 4px;
}
SegmentedItem[isSelected=true] {
padding-top: 6px;
padding-bottom: 6px;
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(0, 0, 0, 0.073);
border-bottom: 1px solid rgba(0, 0, 0, 0.183);
border-radius: 6px;
margin: 0px;
color: black;
}
SegmentedItem[isSelected=true]:hover,
SegmentedItem[isSelected=true]:pressed {
color: black;
}
\ No newline at end of file
qfluentwidgets/_rc/resource.py
浏览文件 @ a02ea848
此差异已折叠。
qfluentwidgets/components/navigation/__init__.py
浏览文件 @ a02ea848
......@@ -2,4 +2,5 @@ from .navigation_widget import (NavigationWidget, NavigationPushButton, Navigati
NavigationTreeWidget, NavigationTreeWidgetBase)
from .navigation_panel import NavigationPanel, NavigationItemPosition, NavigationDisplayMode
from .navigation_interface import NavigationInterface
from .pivot import Pivot, PivotItem
\ No newline at end of file
from .pivot import Pivot, PivotItem
from .segmented_widget import SegmentedItem, SegmentedWidget
\ No newline at end of file
qfluentwidgets/components/navigation/pivot.py
浏览文件 @ a02ea848
# coding:utf-8
from typing import Dict
from PyQt5.QtCore import Qt, pyqtSignal
from PyQt5.QtCore import Qt, pyqtSignal, QRectF
from PyQt5.QtGui import QPainter, QFont
from PyQt5.QtWidgets import QApplication, QPushButton, QWidget, QHBoxLayout, QSizePolicy
from ...common.font import setFont
from ...common.router import qrouter
from ...common.style_sheet import themeColor, FluentStyleSheet
from ..widgets.scroll_area import SingleDirectionScrollArea
from ..widgets.button import PushButton
from .navigation_panel import RouteKeyError
class PivotItem(QPushButton):
class PivotItem(PushButton):
""" Pivot item """
itemClicked = pyqtSignal(bool)
def __init__(self, text: str, parent=None):
super().__init__(text, parent)
def _postInit(self):
self.isSelected = False
self.setProperty('isSelected', False)
self.clicked.connect(lambda: self.itemClicked.emit(True))
font = QFont()
font.setFamilies(['Segoe UI', 'Microsoft YaHei'])
font.setPixelSize(18)
self.setFont(font)
FluentStyleSheet.PIVOT.apply(self)
setFont(self, 18)
def setSelected(self, isSelected: bool):
if self.isSelected == isSelected:
......@@ -38,6 +36,8 @@ class PivotItem(QPushButton):
def paintEvent(self, e):
super().paintEvent(e)
# draw indicator
if not self.isSelected:
return
......@@ -73,7 +73,7 @@ class Pivot(QWidget):
self.setSizePolicy(QSizePolicy.Minimum, QSizePolicy.Minimum)
def addItem(self, routeKey: str, text: str, onClick=None):
def addItem(self, routeKey: str, text: str, onClick=None, icon=None):
""" add item
Parameters
......@@ -86,8 +86,11 @@ class Pivot(QWidget):
onClick: callable
the slot connected to item clicked signal
icon: str
the icon of navigation item
"""
return self.insertItem(-1, routeKey, text, onClick)
return self.insertItem(-1, routeKey, text, onClick, icon)
def addWidget(self, routeKey: str, widget: PivotItem, onClick=None):
""" add widget
......@@ -105,7 +108,7 @@ class Pivot(QWidget):
"""
self.insertWidget(-1, routeKey, widget, onClick)
def insertItem(self, index: int, routeKey: str, text: str, onClick=None):
def insertItem(self, index: int, routeKey: str, text: str, onClick=None, icon=None):
""" insert item
Parameters
......@@ -121,11 +124,17 @@ class Pivot(QWidget):
onClick: callable
the slot connected to item clicked signal
icon: str
the icon of navigation item
"""
if routeKey in self.items:
return
item = PivotItem(text, self)
if icon:
item.setIcon(icon)
self.insertWidget(index, routeKey, item, onClick)
return item
......
qfluentwidgets/components/navigation/segmented_widget.py 0 → 100644
浏览文件 @ a02ea848
# coding:utf-8
from PyQt5.QtCore import Qt
from PyQt5.QtGui import QPainter
from ...common.font import setFont
from ...common.style_sheet import themeColor
from ..widgets.button import PushButton
from .pivot import Pivot, PivotItem
class SegmentedItem(PivotItem):
""" Segmented item """
def _postInit(self):
super()._postInit()
setFont(self, 14)
def paintEvent(self, e):
PushButton.paintEvent(self, e)
# draw indicator
if not self.isSelected:
return
painter = QPainter(self)
painter.setRenderHints(QPainter.Antialiasing)
painter.setPen(Qt.NoPen)
painter.setBrush(themeColor())
w = 16 if not self.isPressed else 10
x = int(self.width() / 2 - w / 2)
painter.drawRoundedRect(x, self.height() - 4, w, 3, 1.5, 1.5)
class SegmentedWidget(Pivot):
""" Segmented widget """
def __init__(self, parent=None):
super().__init__(parent)
self.setAttribute(Qt.WA_StyledBackground)
def insertItem(self, index: int, routeKey: str, text: str, onClick=None, icon=None):
if routeKey in self.items:
return
item = SegmentedItem(text, self)
if icon:
item.setIcon(icon)
self.insertWidget(index, routeKey, item, onClick)
return item
def insertWidget(self, index: int, routeKey: str, widget: PivotItem, onClick=None):
if routeKey in self.items:
return
widget.setProperty('routeKey', routeKey)
widget.itemClicked.connect(self._onItemClicked)
if onClick:
widget.itemClicked.connect(onClick)
self.items[routeKey] = widget
self.hBoxLayout.insertWidget(index, widget, 1)
qfluentwidgets/components/widgets/label.py
浏览文件 @ a02ea848
......@@ -74,7 +74,6 @@ class FluentLabelBase(QLabel):
color = self.darkColor if isDarkTheme() else self.lightColor
palette.setColor(QPalette.WindowText, color)
self.setPalette(palette)
# self.setStyleSheet(f"QLabel{{color: {color.name()}}}")
class CaptionLabel(FluentLabelBase):
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或