QT - CSS：重点装饰

Question

我正在尝试使用CSS为我的QT应用程序创建一个很酷的用户界面。

我有这个问题：我有一个QPushButton，当它在焦点上时，它上面有一个我要删除的矩形。这里有一些屏幕截图：

正常按钮：

聚焦按钮：

我试图添加一些东西（backgroundcolor，text-decoration等）

QPushButton:focus

但它一直在突出显示..

一些提示？

这是QPushButton css代码：

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，我正在使用这个精彩的css：http://www.yasinuludag.com/darkorange.stylesheet

Answer 1

另一种选择（在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 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

由于某种原因，接受的答案似乎不起作用（至少在Qt5.6上）。这使我的工作：

socket-err: a65396c5-6227-49ff-8f7b-a0f7d40d8e01 (390) Errno::ECONNRESET - 104.706

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's answer我发现这不是Qt CSS问题，但是我的Ubuntu外观设置的正常行为是在聚焦按钮上添加橙色矩形。

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

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