QPushButton 带有 QSS 的圆形渐变边框

Question

我正在尝试使用 Qt、QSS 制作一些“复杂”的按钮样式，但我遇到了一个无法解决的问题。

我想做一个渐变的圆形边框，例如从左侧的蓝色到右侧的红色：

想要的结果

所以，这是应用于 QPushButton 的样式表：

background:
    white;
border-radius:
    30px;
border-style:
    solid;
border-width:
    10px;
border-color: 
    qlineargradient(x1:0, y1:0, x2:1, y2:0, stop: 0 blue, stop: 1 red)
    red
    qlineargradient(x1:0, y1:0, x2:1, y2:0, stop: 0 blue, stop: 1 red)
    blue;

这是结果。

很丑吧？

Answer 1

此问题已作为错误报告给 Qt，并且没有迹象表明他们会修复它：https://bugreports.qt.io/browse/QTBUG-2221

我可以通过在paint.net（您可以使用任何图像创建程序）上创建这个确切边框的.png图像来解决这个问题。我将背景设置为透明，并确保图像的边框是我想要的 QPushButton 边框。然后，我将 .png 文件设置为资源，并将其输入到 QPushButton 样式表中：

border: none;
border-image: url(:/icons/images/blue-red-gradient.png);
background-color: rgb(255, 255, 255);
border-radius: 15px;

这是我的 QMainWindow 上的最终结果：

您可以做的另一件事是子类化 QPushButton 并覆盖它的绘制事件。在那里绘制边框并将所有 QPushButton 升级到这个新类。但这会更痛苦，所以我个人更喜欢我的第一个解决方案。

Answer 2

我搜索了一下，看到了两种方法，但第二种使用 border-image ，它与边框半径不兼容，所以你必须处理 :before 和 :after 。

只是为了链接您卡米洛·马丁的答案：

查看答案这里

Answer 3

这可能对你有帮助，虽然晚了，但可能对某人有帮助

class StyledButton(QWidget):
def __init__(self,
             parent=None,
             size_=(150, 50),
             border_=3,
             radius_=10
             ):
    super().__init__(parent)
    self.size_ = size_
    self.border_ = border_
    self.radius_ = radius_
    self.init_ui()

def init_ui(self):
    self.layout = QVBoxLayout(self)

    # Create a QFrame
    self.frame = QFrame()
    if self.size_ is not None:
        self.frame.setFixedSize(self.size_[0]+(self.border_*2), self.size_[1]+(self.border_*2))
    self.frame.setFrameStyle(QFrame.Box | QFrame.Plain)
    self.frame.setStyleSheet(f"border-radius: {self.radius_}px;")  # Set rounded corners

    # Apply the linear gradient style to the QFrame
    gradient_style = f"border: null;border-radius: {self.radius_*0.5}px ;background: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 1, stop: 0 #f00, stop: 0.25 #f0f, stop: 0.5 #f00, stop: 0.75 #00f, stop: 1 #0f0);"
    self.frame.setStyleSheet(gradient_style)

    # Create a QPushButton
    self.button = QPushButton('Button')
    self.button.setFixedSize(self.size_[0], self.size_[1])
    self.button.setStyleSheet('background-color: black; color: white;')

    # Set the layout margins to position the button within the frame
    self.frame_layout = QVBoxLayout(self.frame)
    self.frame_layout.setContentsMargins(self.border_,self.border_,self.border_,self.border_)  # 5 pixels from all sides

    # Add the QPushButton to the QFrame
    self.frame_layout.addWidget(self.button)
    self.layout.addWidget(self.frame)