如何使用 qt 样式表仅自定义部分 qwidget 边框？答案

【问题标题】：How to use qt stylesheet to customize only partial qwidget border?如何使用 qt 样式表仅自定义部分 qwidget 边框？
【发布时间】：2020-02-15 21:24:15
【问题描述】：

我想用样式表做qwidget边框，看起来像一个括号，可以用纯样式表做吗？

我的参考是qt stylesheet doc，但不知道如何自定义它就像截图一样。

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

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

【问题讨论】：

对这里提出的想法不满意，或者...？

标签： qt qtstylesheets

【解决方案1】：

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

惠特：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

括号.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>

【讨论】：

【解决方案2】：

我找到了这个链接，可能对你有帮助：

https://www.w3schools.com/cssref/css3_pr_border-image.asp

我建议探索的另一种可能性是覆盖父小部件上的“paintEvent”方法，调用基线类“paintEvent”来绘制所有内容，然后在您喜欢的任何位置绘制适当的边框。

【讨论】：

Qt 样式表仅支持 css 2.1，因此许多 css 3 功能在 Qt 中不可用。
那么我猜绘画选项是唯一可行的解决方案。
CSS reference docs 中有一个使用border-image 的示例，从我记事起就一直存在。