QTabWidget 在选项卡上设置掩码（不是选项卡内容）

Posted 2023-03-30

【中文标题】QTabWidget 在选项卡上设置掩码（不是选项卡内容）

【英文标题】：QTabWidget set mask on tabs (not tab content)

【发布时间】：2020-02-22 16:56:05

【问题描述】：

我想使用setMask 对QTabWidget 上的标签（不是标签内容）进行圆角处理。我试过了：

tabs = QTabWidget()
tempTabWidget = QRoundedTabWidget()
tabs.addTab(tempTabWidget,"New Tab")

#Tab widget that has rounded corners and
#inverted random corners at the bottom
class QRoundedTabWidget(QWidget):
  def __init__(self,parent=None):
    super(QWidget,self).__init__(parent)
    self.radius = 3
    self.tabHeight = 32
    self.setMask(self.roundEdges(self.rect()))

  def roundEdges(self,rectangle):
    self.tabWidth = InterClassVariables.resizeTabWidth

    region = QRegion()
    region += rectangle.adjusted(self.radius,0,-self.radius,0)
    region += rectangle.adjusted(0,self.radius,0,-self.radius)

    #Top left corner piece
    corner = QRect(rectangle.topLeft(),QSize(2 * self.radius,2 * self.radius))
    region += QRegion(corner,QRegion.Ellipse)

    #Top right corner piece
    corner.moveTopRight(rectangle.topRight())
    region += QRegion(corner,QRegion.Ellipse)

    return region

但是，这会对选项卡的内容而不是选项卡本身设置一个掩码。我是否需要对QTabWidget 对象进行子类化以修改实际构建选项卡的addTab？我在哪里调用标签的子类小部件？

编辑：

这是我目前得到的 - 选项卡内容的两个顶角是圆形的：

这是我想要的标签：

【问题讨论】：

提供minimal reproducible example，同时显示你得到什么和你想得到什么的图像。

【参考方案1】：

实际的选项卡是一个 QTabBar。您可以使用样式表和border-radius 属性轻松完成此操作以实现掩码。

class Template(QWidget):

    def __init__(self):
        super().__init__()
        tabs = QTabWidget()
        tabs.addTab(QWidget(), 'New Tab')
        vbox = QVBoxLayout(self)
        vbox.addWidget(tabs)
        self.setStyleSheet('''
        QTabBar::tab 
            background-color: #555;
            color: #fff;
            padding: 6px;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
        ''')

文档here 中甚至还有一个示例。

关于倒角，我不确定这是否可以通过样式表实现，但也许您可以重新实现绘制事件。 QPainterPath.quadTo() 将绘制二次贝塞尔曲线。

class Tab(QWidget):

    def __init__(self, text, *args, **kwargs):
        super().__init__(*args, **kwargs)
        grid = QGridLayout(self)
        grid.addWidget(QLabel(text), 0, 0, Qt.AlignCenter)

    def paintEvent(self, event):
        qp = QPainter(self)
        qp.setRenderHint(QPainter.Antialiasing)
        qp.setPen(Qt.NoPen)
        qp.setBrush(QColor('#aaa'))

        w, h = self.width(), self.height()
        path = QPainterPath()
        path.moveTo(0, h)
        path.quadTo(w * 0.1, h, w * 0.1, h * 0.75)
        path.lineTo(w * 0.1, h * 0.25)
        path.quadTo(w * 0.1, 0, w * 0.2, 0)
        path.lineTo(w * 0.8, 0)
        path.quadTo(w * 0.9, 0, w * 0.9, h * 0.25)
        path.lineTo(w * 0.9, h * 0.75)
        path.quadTo(w * 0.9, h, w, h)
        qp.drawPath(path)

看起来像这样：

编辑：不幸的是，现在要从中获得功能性标签小部件，我认为您必须重新发明***。这是一个最小的例子：

class Tab(QAbstractButton):

    def __init__(self, text, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.setCheckable(True)
        grid = QGridLayout(self)
        grid.addWidget(QLabel(text), 0, 0, Qt.AlignCenter)

    def paintEvent(self, event):
        qp = QPainter(self)
        qp.setRenderHint(QPainter.Antialiasing)
        qp.setPen(Qt.NoPen)
        color = '#ccc' if self.isChecked() else '#aaa'
        qp.setBrush(QColor(color))

        w, h = self.width(), self.height()
        path = QPainterPath()
        path.moveTo(0, h)
        path.quadTo(w * 0.1, h, w * 0.1, h * 0.75)
        path.lineTo(w * 0.1, h * 0.25)
        path.quadTo(w * 0.1, 0, w * 0.2, 0)
        path.lineTo(w * 0.8, 0)
        path.quadTo(w * 0.9, 0, w * 0.9, h * 0.25)
        path.lineTo(w * 0.9, h * 0.75)
        path.quadTo(w * 0.9, h, w, h)
        qp.drawPath(path)


class TabWidget(QWidget):

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.hbox = QHBoxLayout()
        self.hbox.setSpacing(0)
        self.qbg = QButtonGroup(self)
        self.tabs = []
        self.stacked_widget = QStackedWidget()
        vbox = QVBoxLayout(self)
        vbox.setSpacing(0)
        vbox.addLayout(self.hbox)
        vbox.addWidget(self.stacked_widget)
        self.setStyleSheet('''
        QStackedWidget 
            background-color: #ccc;
            border-radius: 4px;
        ''')

    def addTab(self, widget, text):
        self.stacked_widget.addWidget(widget)
        tab = Tab(text)
        tab.clicked.connect(self.setCurrentTab)
        self.tabs.append(tab)
        self.hbox.addWidget(tab)
        self.qbg.addButton(tab)

    def setCurrentTab(self):
        i = self.tabs.index(self.sender())
        self.stacked_widget.setCurrentIndex(i)


class Template(QWidget):

    def __init__(self):
        super().__init__()
        tabs = TabWidget()
        tabs.addTab(Widget(), 'Tab 1') 
        tabs.addTab(Widget(), 'Tab 2')
        vbox = QVBoxLayout(self)
        vbox.addWidget(tabs)

【讨论】：

谢谢，这行得通。在使用样式表的旁注中，您是否知道一种在选项卡的底角添加反向边框半径的方法，以实现类似于 Google Chrome 的外观？再次感谢。

@SamG101 我不知道如何使用样式表，但我用另一种方式编辑了帖子，你可以得到那种外观。

太好了，谢谢！最后一件事，我如何将Tab(Qwidget) 添加到TabBar，而不是添加普通的QWidget？谢谢

@SamG101 我添加了一个示例，它需要重新创建 TabWidget，并从 QAbstractButton 子类化 Tab。如果它回答了您的问题，请批准。

非常感谢，非常完美