在 pyqt 中的选项卡更改上淡入淡出

Posted 2023-02-14

【中文标题】在 pyqt 中的选项卡更改上淡入淡出

【英文标题】：Fading on Tab Change in pyqt

【发布时间】：2017-11-30 19:52:02

【问题描述】：

我有一个包含两个标签的页面。我想在更改标签时添加淡入淡出效果。这可能吗？

import sys
from PyQt4.QtCore import QTimeLine
from PyQt4.QtGui import *

class FaderWidget(QWidget):

    def __init__(self, old_widget, new_widget):

        QWidget.__init__(self, new_widget)

        self.old_pixmap = QPixmap(new_widget.size())
        old_widget.render(self.old_pixmap)
        self.pixmap_opacity = 1.0

        self.timeline = QTimeLine()
        self.timeline.valueChanged.connect(self.animate)
        self.timeline.finished.connect(self.close)
        self.timeline.setDuration(333)
        self.timeline.start()

        self.resize(new_widget.size())
        self.show()

    def paintEvent(self, event):

        painter = QPainter()
        painter.begin(self)
        painter.setOpacity(self.pixmap_opacity)
        painter.drawPixmap(0, 0, self.old_pixmap)
        painter.end()

    def animate(self, value):

        self.pixmap_opacity = 1.0 - value
        self.repaint()

class StackedWidget(QStackedWidget):

    def __init__(self, parent = None):
        QStackedWidget.__init__(self, parent)

    def setCurrentIndex(self, index):
        self.fader_widget = FaderWidget(self.currentWidget(), self.widget(index))
        QStackedWidget.setCurrentIndex(self, index)

    def setPage1(self):
        self.setCurrentIndex(0)

    def setPage2(self):
        self.setCurrentIndex(1)


if __name__ == "__main__":

    app = QApplication(sys.argv)

    window = QWidget()

    stack = StackedWidget()
    stack.addWidget(QCalendarWidget())
    editor = QTextEdit()
    editor.setPlainText("Hello world! "*100)
    stack.addWidget(editor)

    page1Button = QPushButton("Page 1")
    page2Button = QPushButton("Page 2")
    page1Button.clicked.connect(stack.setPage1)
    page2Button.clicked.connect(stack.setPage2)

    layout = QGridLayout(window)
    layout.addWidget(stack, 0, 0, 1, 2)
    layout.addWidget(page1Button, 1, 0)
    layout.addWidget(page2Button, 1, 1)

    window.show()

    sys.exit(app.exec_())

这是显示一些淡入淡出效果的代码，但我没有从中得到任何东西以及它是如何工作的以及如何在选项卡上实现。如果有人可以帮助我在标签上实现它，那将是非常可观的。 提前致谢。

【参考方案1】：

使用与您显示的代码相同的逻辑，每个小部件都将放置在 QStackedWidget 中，其中一个是要显示的小部件，另一个是 FaderWidget。

class FaderWidget(QWidget):
    def __init__(self, *args, **kwargs):
        QWidget.__init__(self, *args, **kwargs)
        self.pixmap_opacity = None
        self.timeline = QTimeLine(333, self)
        self.timeline.valueChanged.connect(self.animate)
        self.timeline.finished.connect(self.close)

    def start(self, old_widget, new_widget):
        self.pixmap_opacity = 1.0
        self.old_pixmap = QPixmap(new_widget.size())
        old_widget.render(self.old_pixmap)

        self.timeline.start()

        self.resize(new_widget.size())
        self.show()

    def paintEvent(self, event):
        if self.pixmap_opacity:
            QWidget.paintEvent(self, event)
            painter = QPainter(self)
            painter.setOpacity(self.pixmap_opacity)
            painter.drawPixmap(0, 0, self.old_pixmap)

    def animate(self, value):
        self.pixmap_opacity = 1.0 - value
        self.update()


class FaderTabWidget(QTabWidget):
    def __init__(self, parent=None):
        QTabWidget.__init__(self, parent)
        self.currentChanged.connect(self.onCurrentIndex)
        self.last = -1
        self.current = self.currentIndex()

    def onCurrentIndex(self, index):
        self.last = self.current
        self.current = self.currentIndex()
        if self.widget(self.last):
            self.widget(self.last).setCurrentIndex(1)
            old_widget = self.widget(self.last).widget(0)
            current_widget = self.widget(self.current).widget(0)
            fade = self.widget(self.current).widget(1)
            fade.start(old_widget, current_widget)

    def addTab(self, widget, text):
        stack = QStackedWidget(self)
        stack.addWidget(widget)
        fade = FaderWidget(self)
        fade.timeline.finished.connect(lambda: stack.setCurrentIndex(0))
        stack.addWidget(fade)
        stack.setCurrentIndex(0 if self.currentIndex() == -1 else 1)
        QTabWidget.addTab(self, stack, text)


if __name__ == "__main__":
    app = QApplication(sys.argv)

    window = QWidget()

    tabWidget = FaderTabWidget()
    tabWidget.addTab(QCalendarWidget(), "Tab1")
    editor = QTextEdit()
    editor.setPlainText("Hello world! " * 100)
    tabWidget.addTab(editor, "Tab2")
    layout = QVBoxLayout(window)
    layout.addWidget(tabWidget)
    window.show()
    sys.exit(app.exec_())

【讨论】：

谢谢哥们！但是如何将它与所有 UI 的驱动程序文件一起使用。我现在已经包含了 4-5 个 ui 文件，如何在不更改 ui-to-py 编译文件的情况下将其添加到它们中

一旦你告诉我使用设计器中提升的小部件选项的手指标签逻辑？应该这样吗？

您能帮我在圆形标签中绘制图像吗？我曾尝试更改标签的 css（边界半径），但图像覆盖了它..有没有办法通过画家实现它，然后制作它的像素图，然后将其添加到标签？抱歉，当我的问题达到限制时，我必须这样做：/