python - PyQt 中 QWidget 上的圆角

Question

我在 PyQt4 中制作了一个 greadient QWidget，但我想要圆边而不是尖锐的边缘，可以在 pyqt 中做吗？

from PyQt4 import QtGui, QtCore
import sys

class ControlBar(QtGui.QWidget):
    """ docstring for ControlBar"""
    def __init__(self, parent=None):
        super(ControlBar, self).__init__(parent)
        self.resize(440, 100)
        self.setWindowFlags(QtCore.Qt.FramelessWindowHint)
        self.setWindowTitle("QLinearGradient Vertical Gradient ")
        self.setAttribute(QtCore.Qt.WA_TranslucentBackground)
        self.buildUi()

    def mousePressEvent(self, event):
        self.offset = event.pos()

    def mouseMoveEvent(self, event):
        try:
              x=event.globalX()
              y=event.globalY()
              x_w = self.offset.x()
              y_w = self.offset.y()
              self.move(x-x_w, y-y_w)
        except: pass   

    def paintEvent(self, ev):
        painter = QtGui.QPainter(self)
        gradient = QtGui.QLinearGradient(QtCore.QRectF(self.rect()).topLeft(),QtCore.QRectF(self.rect()).bottomLeft())
        gradient.setColorAt(0.0, QtCore.Qt.black)
        gradient.setColorAt(0.4, QtCore.Qt.gray)
        gradient.setColorAt(0.7, QtCore.Qt.black)
        painter.setBrush(gradient)
        painter.drawRoundedRect(0, 0, 440, 100, 20.0, 20.0)

    def buildUi(self):
        self.hoelayout = QtGui.QHBoxLayout()
        self.openBtn = RoundEdgeButton("Hello")
        self.backBtn = RoundEdgeButton()
        self.pausBtn = RoundEdgeButton()
        self.nextBtn = RoundEdgeButton()
        self.hoelayout.addStretch(1)
        self.hoelayout.addWidget(self.openBtn)
        self.hoelayout.addStretch(1)
        self.hoelayout.addWidget(self.backBtn)
        self.hoelayout.addStretch(1)
        self.hoelayout.addWidget(self.pausBtn)
        self.hoelayout.addStretch(1)
        self.hoelayout.addWidget(self.nextBtn)
        self.hoelayout.addStretch(1)
        self.setLayout(self.hoelayout)

class RoundEdgeButton(QtGui.QPushButton):
    """ docstring for RoundEdgeButton"""
    def __init__(self,text=None, parent=None):
        super(RoundEdgeButton, self).__init__(parent)

        if text:
            self.setText(text)

    def paintEvent(self, ev):
        btnPaint = QtGui.QPainter(self)
        btnGradient = QtGui.QLinearGradient(QtCore.QRectF(self.rect()).topLeft(), QtCore.QRectF(self.rect()).bottomLeft())
        btnGradient.setColorAt(0.8, QtCore.Qt.black)
        btnGradient.setColorAt(0.1, QtCore.Qt.gray)
        btnGradient.setColorAt(0.8, QtCore.Qt.black)
        btnPaint.setBrush(btnGradient)
        btnPaint.drawRoundedRect(self.rect(), 100.0, 100.0)


if __name__ == '__main__':
    app = QtGui.QApplication(sys.argv)
    win = ControlBar()
    win.show()
    win.raise_()
    sys.exit(app.exec_())

这是现在的样子

Answer 1

您可以使用QPainter.drawRoundedRect 自行绘制小部件的区域:

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


class MyRoundWidget(QWidget):

    def __init__(self, master=None):
        super(MyRoundWidget,self).__init__(master)
        self.setWindowFlags(Qt.FramelessWindowHint)
        self.setWindowTitle("QLinearGradient Vertical Gradient ")
        self.setAttribute(Qt.WA_TranslucentBackground)


    def paintEvent(self, ev):
        painter = QPainter(self)
        painter.begin(self)
        gradient = QLinearGradient(QRectF(self.rect()).topLeft(),QRectF(self.rect()).bottomLeft())
        gradient.setColorAt(0.0, Qt.black)
        gradient.setColorAt(0.4, Qt.gray)
        gradient.setColorAt(0.7, Qt.black)
        painter.setBrush(gradient)
        painter.drawRoundedRect(self.rect(), 10.0, 10.0)
        painter.end()


def main():    

    app     = QApplication(sys.argv)
    widget = MyRoundWidget()    

    widget.show()
    widget.raise_()



    sys.exit(app.exec_())
if __name__ == '__main__':
    main()

要使按钮半透明，请执行以下操作:

self.setStyleSheet("""
        QPushButton{
        opacity: 50;            
        background-color: rgba(204,204,204,10);
        }
        """)

将 10 更改为您喜欢的介于 0 和 255 之间的值。

如果你只想要圆形按钮(而不是圆形矩形按钮)替换 btnPaint.drawRoundedRect(self.rect(), 100.0, 100.0) 为 btnPaint.drawEllipse(10,10,self .width()-10, self.height()-10)