PyQt5 - 右侧的单选按钮指示器

介绍

在 PyQt5 中，如果需要实现一个选项卡控件，并且需要在右侧添加一个单选按钮指示器，来指示当前选中的选项卡，那么可以使用 QTabWidget 和 QTabBar 控件来实现这个功能。

QTabWidget 控件提供了一个选项卡窗口部件，它包含多个 QTabBar 控件并自动将它们组合，

QTabBar 控件提供了一个用于指示当前界面的单选按钮指示器，并支持添加新选项卡（选项卡的标题可以通过 setText() 方法设置）。

在本教程中，我们将演示如何使用 QTabWidget 和 QTabBar 实现右侧的单选按钮指示器。

代码

以下是一个演示如何使用 QTabWidget 和 QTabBar 实现右侧的单选按钮指示器的示例程序。该程序包含两个选项卡（"Tab 1" 和 "Tab 2"），并将它们的标题设置为红色。

from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QTabWidget, QTabBar, QLabel
from PyQt5.QtGui import QPalette, QColor

class TabBar(QTabBar):
    
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.setExpanding(False)
        self.setElideMode(Qt.ElideRight)
        
    def paintEvent(self, event):
        painter = QStylePainter(self)
        option = QStyleOptionTab()
        
        for i in range(self.count()):
            
            self.initStyleOption(option, i)
            widget = self.tabButton(i, QTabBar.RightSide)
            
            if widget:
                widget.hide()
                
            painter.drawControl(QStyle.CE_TabBarTabShape, option)
            painter.save()
            
            palette = QApplication.palette()
            tab_color = QColor(238, 45, 45) # 设置选项卡颜色
            palette.setColor(QPalette.Active, QPalette.Highlight, tab_color)
            palette.setColor(QPalette.Active, QPalette.HighlightedText, QColor(Qt.white))
            
            painter.fillRect(option.rect, tab_color)
            painter.setPen(palette.color(QPalette.Active, QPalette.HighlightedText))
            painter.drawText(option.rect, Qt.AlignCenter, option.text)
            
            painter.restore()
        
    def tabSizeHint(self, index):
        size = super(TabBar, self).tabSizeHint(index)
        return QSize(size.width(), 35)

class Example(QWidget):

    def __init__(self):
        super().__init__()
        
        self.initUI()

    def initUI(self):
        
        vbox = QVBoxLayout(self)
        tabs = QTabWidget()
        
        tabs.setTabBar(TabBar())
        tabs.addTab(QLabel("This is the first tab."), "Tab 1")
        tabs.addTab(QLabel("This is the second tab."), "Tab 2")
        
        vbox.addWidget(tabs)

        self.setLayout(vbox)

        self.setGeometry(300, 300, 500, 400)
        self.setWindowTitle('PyQt5 - 右侧的单选按钮指示器')    
        self.show()

if __name__ == '__main__':

    app = QApplication([])
    ex = Example()
    app.exec_()

解释

使用 QTabWidget 和 QTabBar 实现右侧的单选按钮指示器，需要创建一个继承自 QTabBar 的类，并重写它的 paintEvent 方法，以调整选项卡的显示样式。在该方法中，我们使用 QStylePainter 和 QStyleOptionTab 类来绘制每个选项卡，并设置其颜色和文本属性。我们还使用 QWidget.hide() 方法来隐藏默认的单选按钮指示器。

在上面的代码中，我们创建了一个名为 TabBar 的类，它继承自 QTabBar。在该类的构造函数中，我们禁用了选项卡的自动大小调整功能，并设置了选项卡标题的省略模式。在 paintEvent 方法中，我们首先使用 QStylePainter 和 QStyleOptionTab 来绘制选项卡，然后调整其颜色和文本属性，最后使用 QWidget.hide() 方法来隐藏默认的单选按钮指示器。我们还实现了一个 tabSizeHint 方法，以设置选项卡的高度。

在 Example 类中，我们初始化了一个 QVBoxLayout，并创建了一个 QTabWidget。我们将继承自 TabBar 的自定义选项卡设置为 QTabWidget 的选项卡栏，并添加了两个选项卡（"Tab 1" 和 "Tab 2"）到 QTabWidget 中。

最后，我们调用 QWidget.setGeometry() 和 QWidget.setWindowTitle() 方法，设置程序窗口的位置和标题，并调用 QWidget.show() 方法，显示程序窗口。