如何使用样式表获取QWidget的括号样式边框？

Question

我想使用样式表使

QWidget

边框看起来像括号。

我的参考是Qt样式表文档，但是我如何自定义它以使其看起来像屏幕截图中的那样？

这是我所能得到的，仅显示左右边框。

QWidget{
    border: 1px solid red;
    border-width: 0px 1px;
}

用纯样式表可以完成吗？

Answer 1

问题中的屏幕截图中的示例只能通过图像 AFAIK 来实现，即使在完全支持 CSS 的 Web 浏览器中也是如此。使用 Qt，您实际上可以选择在小部件后面/周围使用自定义图像的三种选择。

致：

background-image

、

border-image

和

image

：

https://doc.qt.io/qt-5/stylesheet-customizing.html

这里已经有一个使用

border-image

的示例：https://doc.qt.io/qt-5/stylesheet-examples.html#qpushbutton-and-images

我个人喜欢 SVG 图像，所以这里有一个我快速制作的示例。这是使用

image

属性来覆盖括号的透明、可缩放 SVG。 （请注意，要使 CSS 应用于按钮，可能需要覆盖本机边框，就像我在示例中所做的那样。）

// Requires Qt svg module, as in `QT += svg`.
#include <QtWidgets>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QDialog d;
    d.setLayout(new QVBoxLayout);
    QToolBar* tb = new QToolBar(&d);
    tb->setIconSize(QSize(48, 48));
    d.layout()->addWidget(tb);

    QIcon icon("./so-icon.svg");
    for (int i=0; i < 4; ++i)
        tb->addAction(icon, QStringLiteral("Action %1").arg(i));

    QToolButton *btn = qobject_cast<QToolButton*>(tb->widgetForAction(tb->actions().at(1)));
    btn->setStyleSheet(QStringLiteral(
        "QToolButton {"
            "border: none;"  // To override some styles like WindowsVista and Macintosh
            "image: url(./brackets.svg);"
        "}"
    ));

    return d.exec();
}

https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg

文件 brackets.svg

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<path fill="#047F18" d="M12,44H4V4h8V0H0v48h12V44z"/>
<path fill="#047F18" d="M36,4h8v40h-8v4h12V0H36V4z"/>
</svg>

Answer 2

一种可能是使用 CSS border-image 属性。

另一种可能性是重写父小部件上的

paintEvent

方法，调用基线类

paintEvent

绘制所有内容，然后在您喜欢的顶部绘制适当的边框。

Answer 3

可以使用

QLinearGradient

将顶部和底部边框分割为 3 个部分。左右部分获取边框颜色，中间部分获取小部件背景颜色。

在此示例样式表中，绿色是外部颜色，白色是内部颜色。

background-color: rgb(255, 255, 255);
border: 5px solid qlineargradient(spread: pad,x1:0, y1:0, x2:1, y2:0, 
                                  stop: 0 green,
                                  stop: 0.2 green,
                                  stop: 0.21 white,
                                  stop: 0.8 white,
                                  stop: 0.81 green
                                  stop: 1 green);
border-left:  5px solid green;
border-right: 5px solid green;

需要有一小部分将它们分开才能获得纯色。

它的外观如下：

这种方法的缺点是每个角都有对角间隙，这是由于边框没有绘制在彼此之上而造成的，这使得它看起来是分段的。