14

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

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

普通按钮：

在此处输入图像描述

重点按钮：

在此处输入图像描述

我试图添加一些东西（背景色、文本装饰等）

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;*/
}

附言。我在 Ubuntu 12.04 上，使用 Qt 4.8，我正在使用这个美妙的 css：http ://www.yasinuludag.com/darkorange.stylesheet

4

5 回答 5

10

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

QPushButton:focus {
   border: none;
   outline: none;
}
于 2016-12-16T15:46:25.703 回答
9

突出显示的矩形可能是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);
于 2013-06-25T09:47:24.567 回答
6

另一种选择（在 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 }"，
而虚线图案消失了！现在我选中的按钮很干净，正如我所期望的那样具有纯色背景样式。

于 2015-02-26T20:03:11.560 回答
3

我在 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();
于 2013-06-24T16:37:51.123 回答
1

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

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

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

于 2013-06-25T12:13:49.053 回答