【问题标题】:Qt Stylesheet. Background-color, YES. background-image, NOQt 样式表。背景颜色,是的。背景图像,否
【发布时间】:2011-06-17 08:40:45
【问题描述】:

样式表有一个奇怪的问题:我有一个窗口,是 QWidget 类的子窗口。我对其应用样式表,以理想地将整个窗口的背景更改为带有 repeat-x 和 repeat-y 的图像,然后将其平铺。

样式表“管道”有效。如果我使用“背景颜色”并将其设置为红色,则整个窗口将被涂成红色。但是,如果我使用背景图像,它不会。如果我在窗口内添加一个子小部件(使用 Qt-Designer),则背景图像将在该子小部件内工作,但不在它之外,在整个父窗口中。

显然我做错了什么,但我真的不知道为什么背景颜色会在整个窗口上工作,但背景图像不会,除非有一个子小部件,然后,只有在它里面.

【问题讨论】:

  • 请张贴样式表。 Qt 样式表规则与 CSS 规则并不完全相同。它可能只是一种与您预期不同的行为,例如,设置样式的范围。
  • 此样式表仅在 QWidget 后代窗口上已经存在 QWidget 元素时才显示 jpeg,但仅在该元素的区域中,而不是在整个窗口中。 QWidget { background-image: url(:/images/metal-texture.jpg);背景位置:左上角;背景重复:重复-x重复-y; /*背景颜色:红色;*/ }
  • 对不起,我还是不知道发生了什么。我需要知道样式表应用在哪个元素上。而且我仍然不清楚您的小部件层次结构。您能否发布一些代码,或者绘制一个 ASCII 图或其他东西?抱歉我太密集了... :)
  • 顺便说一句,只需编辑您的问题,这样您就可以获得所有不错的格式选项,而不是尝试将其放在评论中。
  • 我的小部件层次结构很简单,有一个 QWidget 派生类。没有其他的。我想做的只是有一个带有背景图像的窗口。窗口本身是空的。我可以使这个背景图像工作的唯一方法是,如果我在我的 UI 上添加一个空的 Qwidget(使用 QT-Designer)。然后背景图像只为那个 QWidget 绘制,而不是整个窗口。

标签: qt


【解决方案1】:

我遇到了类似的问题,通过阅读 Qt Stylesheets 文档解决了。

正如 Qt 的样式表参考中所说,将 CSS 样式应用于从 QWidget 继承的自定义小部件需要以这种方式重新实现 paintEvent():

void CustomWidget::paintEvent(QPaintEvent *)
{
    QStyleOption opt;
    opt.init(this);
    QPainter p(this);
    style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);
}

如果不这样做,您的自定义小部件将仅支持 background、background-clip 和 background-origin 属性。

您可以在此处阅读:Qt Stylesheets reference 在“可样式化小部件列表”部分 -> QWidget。

希望,它会有所帮助!

【讨论】:

    【解决方案2】:

    我知道这是一个老问题,但我偶然发现了它,因为我遇到了完全相同的问题。

    事实证明,如果您将小部件创建为 QFrame 的子类而不是 QWidget,那么 background-image 属性似乎就可以了。此外,正如 Dave 的示例所示,如果您只是创建一个“原始”QWidget,它似乎也可以正常工作。无论出于何种原因,如果您创建一个从 QWidget 派生的新小部件,背景图像将不再起作用。

    如果您在 Qt Designer 或 Creator 中创建小部件,它们没有创建 QFrame 派生小部件的选项,所以我只是告诉它我想要一个 QWidget 派生类,然后手动更改 .cpp 和 . h 文件从 QFrame 而不是 QWidget 派生。

    【讨论】:

    • 谢谢你!从 QFrame 继承对我有用。你拯救了我的一天。
    【解决方案3】:

    下面的代码在我的机器上运行良好。也许您可以看到它与您所拥有的不同之处?希望对您有所帮助。

    #include <QtGui>
    
    int main(int argc, char **argv)
    {
      QApplication app(argc, argv);
      QWidget main_window;
      main_window.setStyleSheet("background-image: url(Chrysanthemum.jpg); "
                                "background-position: top left; "
                                "background-repeat: repeat-xy;");
      main_window.show();
      return app.exec();
    }
    

    【讨论】:

    • 我想唯一的区别是我使用 QT-Designer 和 *.ui 文件,而您的解决方案是 100% 编程的。无论如何,我想我会通过拥有一个覆盖主 QWidget 的整个区域并拥有自己背景的内部小部件来解决它。感谢您的帮助。
    • 此外,您似乎正在将QWidget 的范围应用于您的样式表,并使用repeat-x repeat-y 而不是repeat-xy。也许其中之一导致了奇怪的行为?
    • 我为我的样式表实验选择了相同的 Windows 示例图片! ;)
    猜你喜欢
    • 2012-09-14
    • 1970-01-01
    • 2012-01-01
    • 2012-08-15
    • 2011-07-22
    • 1970-01-01
    • 1970-01-01
    • 2019-06-24
    • 2012-03-15
    相关资源
    最近更新 更多