添加背景过渡效果

examples/window/demo.py

@@ -101,7 +101,7 @@ if __name__ == '__main__':
     QApplication.setAttribute(Qt.AA_EnableHighDpiScaling)
     QApplication.setAttribute(Qt.AA_UseHighDpiPixmaps)
 
-    # setTheme(Theme.DARK)
+    setTheme(Theme.DARK)
 
     app = QApplication(sys.argv)
     w = Window()

qfluentwidgets/_rc/qss/dark/fluent_window.qss

-FluentWindowBase {
-    background-color: rgb(32, 32, 32);
-}
-
 FluentTitleBar, SplitTitleBar {
     background-color: transparent;
 }
@@ -48,17 +44,13 @@ CloseButton {
 }
 
 StackedWidget {
-    border: 1px solid rgb(29, 29, 29);
+    border: 1px solid rgba(0, 0, 0, 0.18);
     border-right: none;
     border-bottom: none;
     border-top-left-radius: 10px;
-    background-color: rgb(39, 39, 39);
+    background-color: rgba(255, 255, 255, 0.0314);
 }
 
-/* StackedWidget QLabel {
-    color: white;
-} */
-
 SplitFluentWindow > StackedWidget {
     border-top-left-radius: 0px;
     border-top: none;

qfluentwidgets/_rc/qss/light/fluent_window.qss

 StackedWidget {
-    border: 1px solid rgb(229, 229, 229);
+    border: 1px solid rgba(0, 0, 0, 0.068);
     border-right: none;
     border-bottom: none;
     border-top-left-radius: 10px;
-    background-color: rgb(249, 249, 249);
+    background-color: rgba(255, 255, 255, 0.5);
 }
 
 SplitFluentWindow>StackedWidget {

qfluentwidgets/common/animation.py

 # coding: utf-8
 from PyQt5.QtCore import QEasingCurve, QEvent, QObject, QPropertyAnimation, pyqtProperty, pyqtSignal
-from PyQt5.QtGui import QMouseEvent, QEnterEvent
-from PyQt5.QtWidgets import QWidget
+from PyQt5.QtGui import QMouseEvent, QEnterEvent, QColor
+from PyQt5.QtWidgets import QWidget, QLineEdit
 
+from .config import qconfig
 
 
 class AnimationBase(QObject):
@@ -72,3 +73,108 @@ class TranslateYAnimation(AnimationBase):
         self.ani.setEasingCurve(QEasingCurve.OutElastic)
         self.ani.start()
 
+
+class BackgroundAnimationWidget:
+    """ Background animation widget """
+
+    def __init__(self, *args, **kwargs) -> None:
+        super().__init__(*args, **kwargs)
+        self.isHover = False
+        self.isPressed = False
+        self.bgColorObject = BackgroundColorObject(self)
+        self.backgroundColorAni = QPropertyAnimation(
+            self.bgColorObject, b'backgroundColor', self)
+        self.backgroundColorAni.setDuration(120)
+        self.installEventFilter(self)
+
+        qconfig.themeChanged.connect(self._updateBackgroundColor)
+
+    def eventFilter(self, obj, e):
+        if obj is self:
+            if e.type() == QEvent.Type.EnabledChange:
+                if self.isEnabled():
+                    self.setBackgroundColor(self._normalBackgroundColor())
+                else:
+                    self.setBackgroundColor(self._disabledBackgroundColor())
+
+        return super().eventFilter(obj, e)
+
+    def mousePressEvent(self, e):
+        self.isPressed = True
+        self._updateBackgroundColor()
+        super().mousePressEvent(e)
+
+    def mouseReleaseEvent(self, e):
+        self.isPressed = False
+        self._updateBackgroundColor()
+        super().mouseReleaseEvent(e)
+
+    def enterEvent(self, e):
+        self.isHover = True
+        self._updateBackgroundColor()
+
+    def leaveEvent(self, e):
+        self.isHover = False
+        self._updateBackgroundColor()
+
+    def focusInEvent(self, e):
+        super().focusInEvent(e)
+        self._updateBackgroundColor()
+
+    def _normalBackgroundColor(self):
+        return QColor(0, 0, 0, 0)
+
+    def _hoverBackgroundColor(self):
+        return self._normalBackgroundColor()
+
+    def _pressedBackgroundColor(self):
+        return self._normalBackgroundColor()
+
+    def _focusInBackgroundColor(self):
+        return self._normalBackgroundColor()
+
+    def _disabledBackgroundColor(self):
+        return self._normalBackgroundColor()
+
+    def _updateBackgroundColor(self):
+        if not self.isEnabled():
+            color = self._disabledBackgroundColor()
+        elif isinstance(self, QLineEdit) and self.hasFocus():
+            color = self._focusInBackgroundColor()
+        elif self.isPressed:
+            color = self._pressedBackgroundColor()
+        elif self.isHover:
+            color = self._hoverBackgroundColor()
+        else:
+            color = self._normalBackgroundColor()
+
+        self.backgroundColorAni.stop()
+        self.backgroundColorAni.setEndValue(color)
+        self.backgroundColorAni.start()
+
+    def getBackgroundColor(self):
+        return self.bgColorObject.backgroundColor
+
+    def setBackgroundColor(self, color: QColor):
+        self.bgColorObject.backgroundColor = color
+
+    @property
+    def backgroundColor(self):
+        return self.getBackgroundColor()
+
+
+class BackgroundColorObject(QObject):
+    """ Background color object """
+
+    def __init__(self, parent: BackgroundAnimationWidget):
+        super().__init__(parent)
+        self._backgroundColor = parent._normalBackgroundColor()
+
+    @pyqtProperty(QColor)
+    def backgroundColor(self):
+        return self._backgroundColor
+
+    @backgroundColor.setter
+    def backgroundColor(self, color: QColor):
+        self._backgroundColor = color
+        self.parent().update()

qfluentwidgets/common/style_sheet.py

@@ -118,7 +118,7 @@ class FluentStyleSheet(StyleSheetBase, Enum):
 
     def path(self, theme=Theme.AUTO):
         theme = qconfig.theme if theme == Theme.AUTO else theme
-        return f":/qfluentwidgets/qss/{theme.value.lower()}/{self.value}.qss"
+        return f"qfluentwidgets/_rc/qss/{theme.value.lower()}/{self.value}.qss"
 
 
 def getStyleSheet(file: Union[str, StyleSheetBase], theme=Theme.AUTO):

qfluentwidgets/components/widgets/card_widget.py

 # coding:utf-8
-from PyQt5.QtCore import Qt, pyqtSignal, QRectF
+from PyQt5.QtCore import Qt, pyqtSignal, QRectF, pyqtProperty
 from PyQt5.QtGui import QPixmap, QPainter, QColor, QPainterPath
 from PyQt5.QtWidgets import QWidget, QFrame
 
 from ...common.style_sheet import isDarkTheme
+from ...common.animation import BackgroundAnimationWidget
 
 
-class CardWidget(QFrame):
+class CardWidget(BackgroundAnimationWidget, QFrame):
     """ Card widget """
 
     clicked = pyqtSignal()
@@ -14,26 +15,12 @@ class CardWidget(QFrame):
     def __init__(self, parent=None):
         super().__init__(parent=parent)
         self._isClickEnabled = False
-        self.isPressed = False
-        self.isHover = False
-
-    def mousePressEvent(self, e):
-        self.isPressed = True
-        self.update()
+        self._borderRadius = 5
 
     def mouseReleaseEvent(self, e):
-        self.isPressed = False
-        self.update()
+        super().mouseReleaseEvent(e)
         self.clicked.emit()
 
-    def enterEvent(self, e):
-        self.isHover = True
-        self.update()
-
-    def leaveEvent(self, e):
-        self.isHover = False
-        self.update()
-
     def setClickEnabled(self, isEnabled: bool):
         self._isClickEnabled = isEnabled
         self.update()
@@ -41,6 +28,22 @@ class CardWidget(QFrame):
     def isClickEnabled(self):
         return self._isClickEnabled
 
+    def _normalBackgroundColor(self):
+        return QColor(255, 255, 255, 13 if isDarkTheme() else 170)
+
+    def _hoverBackgroundColor(self):
+        return QColor(255, 255, 255, 21 if isDarkTheme() else 64)
+
+    def _pressedBackgroundColor(self):
+        return QColor(255, 255, 255, 8 if isDarkTheme() else 64)
+
+    def getBorderRadius(self):
+        return self._borderRadius
+
+    def setBorderRadius(self, radius: int):
+        self._borderRadius = radius
+        self.update()
+
     def paintEvent(self, e):
         painter = QPainter(self)
         painter.setRenderHints(QPainter.Antialiasing)
@@ -89,17 +92,8 @@ class CardWidget(QFrame):
 
         # draw background
         painter.setPen(Qt.NoPen)
-        alpha = 170
-        if isDark:
-            if self.isPressed:
-                alpha = 8
-            elif self.isHover:
-                alpha = 21
-            else:
-                alpha = 13
-        elif self.isPressed or self.isHover:
-            alpha = 64
-
         rect = self.rect().adjusted(1, 1, -1, -1)
-        painter.setBrush(QColor(255, 255, 255, alpha))
-        painter.drawRoundedRect(rect, r, r)
\ No newline at end of file
+        painter.setBrush(self.backgroundColor)
+        painter.drawRoundedRect(rect, r, r)
+
+    borderRadius = pyqtProperty(int, getBorderRadius, setBorderRadius)

qfluentwidgets/components/widgets/tab_view.py

@@ -90,6 +90,7 @@ class TabItem(PushButton):
         self.setMaximumWidth(240)
         self.setMinimumWidth(64)
         self.installEventFilter(ToolTipFilter(self, showDelay=1000))
+        self.setAttribute(Qt.WA_LayoutUsesWidgetRect)
 
         self.closeButton.setIconSize(QSize(10, 10))
 

qfluentwidgets/window/fluent_window.py

@@ -8,6 +8,7 @@ from PyQt5.QtWidgets import QWidget, QHBoxLayout, QVBoxLayout, QLabel
 from ..common.icon import FluentIconBase
 from ..common.router import qrouter
 from ..common.style_sheet import FluentStyleSheet, isDarkTheme
+from ..common.animation import BackgroundAnimationWidget
 from ..components.widgets.frameless_window import FramelessWindow
 from ..components.navigation import (NavigationInterface, NavigationBar, NavigationItemPosition,
                                      NavigationBarPushButton, NavigationTreeWidget)
@@ -16,7 +17,7 @@ from .stacked_widget import StackedWidget
 from qframelesswindow import TitleBar
 
 
-class FluentWindowBase(FramelessWindow):
+class FluentWindowBase(BackgroundAnimationWidget, FramelessWindow):
     """ Fluent window base class """
 
     def __init__(self, parent=None):
@@ -44,16 +45,14 @@ class FluentWindowBase(FramelessWindow):
         self.navigationInterface.setCurrentItem(widget.objectName())
         qrouter.push(self.stackedWidget, widget.objectName())
 
+    def _normalBackgroundColor(self):
+        return QColor(32, 32, 32) if isDarkTheme() else QColor(243, 243, 243)
+
     def paintEvent(self, e):
         super().paintEvent(e)
         painter = QPainter(self)
         painter.setPen(Qt.NoPen)
-
-        if isDarkTheme():
-            painter.setBrush(QColor(32, 32, 32))
-        else:
-            painter.setBrush(QColor(243, 243, 243))
-
+        painter.setBrush(self.backgroundColor)
         painter.drawRect(self.rect())