样式化的*** QPushButton 小部件无法正确呈现

Posted 2023-02-14

【中文标题】样式化的*** QPushButton 小部件无法正确呈现

【英文标题】：Styled top-level QPushButton widget does not render properly

【发布时间】：2013-12-17 19:05:44

【问题描述】：

我已经成功地将QPushButton 设置为应用程序的***小部件/窗口，并尝试像这样设置按钮的样式：

#include <QPushButton>
#include <QApplication>

class MyButton : public QPushButton

public:
    MyButton() : QPushButton( "Button" )
    
        setFixedSize( 250 , 65 );
        setStyleSheet( "border-radius: 10px;" ); // style
    
;

int main(int argc, char *argv[])

    QApplication a(argc, argv);
    MyButton b;
    b.setWindowFlags( Qt::FramelessWindowHint | Qt::CustomizeWindowHint | Qt::WindowStaysOnTopHint );
    b.setAttribute(Qt::WA_TranslucentBackground); // Fixes opaque BG
    b.show();

    return a.exec();

不幸的是，如下图所示，应用样式时按钮不再正确呈现。我会很感激帮助让按钮正确呈现样式。

编辑

按照 Kuber Obas 的回答，我希望帮助将小部件的边缘（即圆角之外的边缘）设置为透明，如下所示

【问题讨论】：

独立代码+1！太棒了！

你需要展示你的代码，否则我不知道如何帮助你。我已经编辑了下面的代码以显示背景在边缘周围得到了正确处理。

问题已解决。我所要做的就是在按钮上设置属性Qt::WA_TranslucentBackground)。 （代码如上所示。）

【参考方案1】：

在大多数原生样式中，边框是使用原生功能与按钮的其余部分一起绘制的，并且其元素不能被一个一个替换。一旦你引入了自己的样式，单一的原生样式就消失了。因此，您需要替换原生样式提供的所有功能，包括边框、背景渐变等。如果需要，您需要对其进行调整以“匹配”原生样式。

在这里，您需要完全重新定义边框：至少提供笔 (border:)。半径仅对笔有意义。您还需要重新定义背景，如果您关心背景，请重新定义所有按钮的状态选择器等。您从一个未设置样式的按钮开始！

下面的截图很好地展示了这一点。在左侧，您有一个 Mac 风格的原生按钮，在右侧，您有一个重新定义了边框的按钮。很明显，在这种情况下，默认状态背景也应该调整为与平台的背景相匹配，并且需要添加一些边距。

Qt 并没有真正从头开始重新设计现代原生样式，这就是为什么您不能调整它们的各个元素的原因。这将是太多的工作和一个不断移动的目标。它曾经是为旧的 Windows-95/NT 样式完成的。从 XP 风格开始，决定让平台 API 提供视觉风格位图。类似的事情大概会发生在 OS X 上。这也是为什么您不能在其原生平台之外使用更高级的 XP/Aqua/Mac Qt 样式的原因：相关的原生 API 不存在，因此样式被禁用。

// https://github.com/KubaO/***n/tree/master/questions/styledbutton-20642553
#include <QPushButton>
#include <QHBoxLayout>
#include <QApplication>

int main(int argc, char *argv[])

   QApplication aargc, argv;
   QWidget w;
   QHBoxLayout layout&w;
   QPushButton button1"Default";
   button1.setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Maximum);
   layout.addWidget(&button1);
   QPushButton button2"Styled";
   button2.setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Preferred);
   button2.setStyleSheet(
      "*  border: 2px solid #8f8f91; border-radius: 12px; background-color: #d02020; "
      "*:pressed  background-color: #f6f7fa; ");
   layout.addWidget(&button2);
   auto pal = w.palette();
   pal.setBrush(QPalette::Background, Qt::darkBlue);
   w.setPalette(pal);
   w.show();
   return a.exec();

【讨论】：

@Kuber 不要误会，但我非常非常爱你 :)