如何使用样式表删除 QPushButton 焦点矩形

Question

我有一个 QPushButton，当它处于焦点状态时，它上面有一个我想删除的矩形。这是一些截图：

普通按钮：

聚焦按钮：

我尝试添加一些东西（

backgroundcolor

，

text-decoration

等）

QPushButton:focus

但是，它继续突出显示。

QPushButton 样式表：

QPushButton
{
    color: #b1b1b1;
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #565656, stop: 0.1 #525252, stop: 0.5 #4e4e4e, stop: 0.9 #4a4a4a, stop: 1 #464646);
    border-width: 1px;
    border-color: #1e1e1e;
    border-style: solid;
    border-radius: 6;
    padding: 3px;
    font-size: 12px;
    padding-left: 5px;
    padding-right: 5px;
}

QPushButton:pressed
{
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #2d2d2d, stop: 0.1 #2b2b2b, stop: 0.5 #292929, stop: 0.9 #282828, stop: 1 #252525);
}
   
QPushButton:hover
{
    border: 2px solid QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #d7801a);
}

QPushButton:focus {
    /*background-color: red;*/
}

PS。我使用的是 Ubuntu 12.04，带有 Qt 4.8，并且我正在使用这个 stylesheet。

Answer 1

由于某种原因，接受的答案似乎不起作用（至少在 Qt5.6 上）。这对我来说很重要：

QPushButton:focus {
   border: none;
   outline: none;
}

Answer 2

突出显示的矩形可能是

QStyle::PE_FrameFocusRect

样式。摆脱它的唯一方法是实现自定义样式。幸运的是，Qt 提供了一种仅实现代理的方法，在一般情况下使用另一种样式。对于您要实现的焦点矩形：

class Style_tweaks : public QProxyStyle
{
    public:

        void drawPrimitive(PrimitiveElement element, const QStyleOption *option,
                           QPainter *painter, const QWidget *widget) const
        {
            /* do not draw focus rectangles - this permits modern styling */
            if (element == QStyle::PE_FrameFocusRect)
                return;

            QProxyStyle::drawPrimitive(element, option, painter, widget);
        }
};

qApp->setStyle(new Style_tweaks);

Answer 3

还有一个替代方案（适用于 Windows 和 ubuntu），为了简单起见，我使用纯色：

ui->pushButton->setStyleSheet(
    "QPushButton { background-color: #0188cc; color: #ffffff; outline: none }"
);

注意

"outline: none"

属性 - 它从按钮上删除焦点矩形。

还有一个关于可检查按钮的相关提示：默认情况下，检查按钮是用点图案绘制的，而不是我期望的纯色

"QPushButton:checked { background-color: #0188cc; color: #ffffff; }"

。

我将

"border: none"

添加到按钮样式表中：

"QPushButton:checked {  background-color: #0188cc; color: #ffffff; border: none }"

,
虚线图案消失了！现在我选中的按钮很干净，正如我所期望的纯色背景样式。

Answer 4

我在 Windows 7 (Qt5) 和 Ubuntu 12 (Qt4.8) 上运行了这段代码。没有任何问题：

QFile file("style.css");
if(file.open(QIODevice::ReadOnly))
{
  QString data = file.readAll();

  // "this" is the derived QMainWindow class
  this->setStyleSheet(data);
}

或者...

ui->pushButton->setStyleSheet("QPushButton"
                              "{"
                              "color: #b1b1b1;"
                              "background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #565656, stop: 0.1 #525252, stop: 0.5 #4e4e4e, stop: 0.9 #4a4a4a, stop: 1 #464646);"
                              "border-width: 1px;"
                              "border-color: #1e1e1e;"
                              "border-style: solid;"
                              "border-radius: 6;"
                              "padding: 3px;"
                              "font-size: 12px;"
                              "padding-left: 5px;"
                              "padding-right: 5px;"
                              "}"
                              "QPushButton:pressed"
                              "{"
                              "background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #2d2d2d, stop: 0.1 #2b2b2b, stop: 0.5 #292929, stop: 0.9 #282828, stop: 1 #252525);"
                              "}"
                              "QPushButton:hover"
                              "{"
                              "border: 2px solid QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #d7801a);"
                              "}"
                              );

qDebug() << ui->pushButton->styleSheet();

Answer 5

感谢 Huytard 的回答 我发现这不是 Qt CSS 问题，而是我的 Ubuntu 外观设置的正常行为，在焦点按钮上添加橙色矩形。

主题 Ambiance 是 Ubuntu 12.04 中的默认主题，它具有使用橙色内部矩形增强聚焦元素的图形行为。

如果我更改主题，我发布的效果（我认为是 QT CSS 问题）就会消失。所以..这不是QT CSS 问题，而是Ubuntu 的问题。如果有人对此感兴趣..http://askubuntu.com充满了有关更改主题颜色的信息。