【问题标题】:How to add a background image to a QWidget without using QMainWindow?如何在不使用 QMainWindow 的情况下向 QWidget 添加背景图像?
【发布时间】:2020-08-20 19:11:19
【问题描述】:

编辑:问题还没有解决,我暂时使用@Scheffs 的回答作为解决方法。

是否可以将图像作为背景添加到使用 QWidget 作为基类创建的 Qt 小部件应用程序中?我这里根本没有使用 QMainWindow。

在 Qt Creator 中,您可以在创建新项目的同时生成骨架源代码文件。如果您选择 QWidget 作为基类,并尝试通过更改小部件样式表(手动枯萎或从 IDE 的设计部​​分)添加图像作为背景,则在构建项目时图像不会显示.如果可能,我该如何解决这个问题?

我创建一个 Qt 资源文件,添加一个图像(在源代码目录中),并设置样式表,就是这样。但是如果我用

添加背景颜色
Widget->setStyleSheet(QString::fromUtf8("#Widget {background-color: rgb(55,55,55)};")); 

ui_widget.h 中,它工作正常并在构建后显示。

如果我从 Qt Creator 中预览小部件,图像会出现,但在构建和运行后不会出现。

这里选择 QWidget 作为 Qt Creator 中的基类:

这是 main.cpp:

#include "widget.h"
#include <QtCore/qglobal.h>
#include <QtWidgets/QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;
    w.show();
    return a.exec();
}

这是 ui_widget.h:

#include <QtCore/QVariant>
#include <QtWidgets/QApplication>
#include <QtWidgets/QWidget>

QT_BEGIN_NAMESPACE
class Ui_Widget
{ 
public:
    void setupUi(QWidget *Widget)
    {
        if (Widget->objectName().isEmpty())
            Widget->setObjectName(QString::fromUtf8("Widget"));
        Widget->resize(600, 150);

        // I add this line, if I changed the style sheet to a simple background color it shows up with no problem {background-color: rgb(1,1,200)}
        Widget->setStyleSheet(QString::fromUtf8("#Widget {background-image: url(:/pic.jpg);}"));

        retranslateUi(Widget);
        QMetaObject::connectSlotsByName(Widget);
    } // setupUi

    void retranslateUi(QWidget *Widget)
    {
        Widget->setWindowTitle(QApplication::translate("Widget", "Widget", nullptr));
    } // retranslateUi

};

namespace Ui {
    class Widget: public Ui_Widget {};
} // namespace Ui

QT_END_NAMESPACE

这是widget.h:

#include <QtCore/qglobal.h>
#include <QtWidgets/QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT
public:
    Widget(QWidget *parent = nullptr);
    ~Widget();
private:
    Ui::Widget *ui;
};

这是 widget.cpp:

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent), ui(new Ui::Widget) { ui->setupUi(this); }

Widget::~Widget() { delete ui; }

很抱歉添加了整个生成的代码,但它可能会有所帮助,谢谢。

【问题讨论】:

  • 我很确定QWidget 不支持背景图片。请改用QFrame
  • @G.M.根据Qt Style Sheets Referenceplain QWidgets 应该支持background,并且明确提到了background-image。如果它也不适用于QFrame,我会检查图像是否已正确添加到 Qt 资源以及路径是否正确。
  • @Scheff 你是对的。我刚刚读了this bit,它没有明确提到“图像”,并假设最坏的情况:-/。谢谢指正。
  • @Scheff 我确定路径是正确的。我忘了提到,如果我在构建之前从 Qt Creator 中预览小部件,则会出现图像,而在构建之后不会。
  • 在我这边检查了这个之后,我更加相信你的 Qt 资源有问题。我没有使用 Qt creator,而是在 Notepad++ 中编写了所有内容(至少对于第二个 MCVE)并使用命令行工具进行构建。不过,我相信它也应该在 Qt creator 中工作。

标签: c++ qt qwidget


【解决方案1】:

出于好奇,我尝试了自己的MCVE

C++ 源码testQWidgetBackgroundImage.cc:

// Qt header:
#include <QtWidgets>

// main application
int main(int argc, char **argv)
{
  qDebug() << "Qt Version:" << QT_VERSION_STR;
  QApplication app(argc, argv);
  // setup GUI
  QWidget qWinMain;
  qWinMain.setWindowTitle("Test Background Image");
  qWinMain.resize(640, 480);
  qWinMain.setObjectName("Widget");
  qWinMain.setStyleSheet("#Widget { background-image: url(cat.jpg); }");
  qWinMain.show();
  // runtime loop
  return app.exec();
}

构建脚本CMakeLists.txt:

project(QWidgetBackgroundImage)

cmake_minimum_required(VERSION 3.10.0)

set_property(GLOBAL PROPERTY USE_FOLDERS ON)
set(CMAKE_CXX_STANDARD 17)
set(CMAKE_CXX_STANDARD_REQUIRED ON)
set(CMAKE_CXX_EXTENSIONS OFF)

find_package(Qt5Widgets CONFIG REQUIRED)

include_directories("${CMAKE_SOURCE_DIR}")

add_executable(testQWidgetBackgroundImage testQWidgetBackgroundImage.cc)

target_link_libraries(testQWidgetBackgroundImage Qt5::Widgets)

输出:

因此,至少在带有 VS 2017 和 Qt 5.13 的 Windows 10 中,我能够显示带有由样式表设置的背景图像的普通 QWidget

这与Qt Style Sheets Reference – background 中记录的内容一致:

设置背景的简写。等效于指定背景颜色、背景图像、背景重复和/或背景位置。

QAbstractItemView 子类、QAbstractSpinBox 子类、QCheckBox、QComboBox、QDialog、QFrame、QGroupBox、QLabel、QLineEdit、QMenu、QMenuBar、QPushButton、QRadioButton、QSplitter、QTextEdit、QToolTip 和普通 QWidget 支持此属性。

注意:

我必须承认我没有任何使用 Qt 资源的经验。因此,我提供的 URL 与 url(cat.jpg) 一样,这导致尝试从本地当前工作目录中的文件加载(如上面的快照所示成功)。以: 为前缀(例如url(:/cat.jpg))将改为处理Qt 资源中的条目。

进一步阅读:The Qt Resource System


阅读文档后。在上面的链接中,我注意到它使用起来并不复杂,并稍微修改了上面的MCVE:

C++源文件testQWidgetBackgroundImage.cc

// Qt header:
#include <QtWidgets>

// main application
int main(int argc, char **argv)
{
  qDebug() << "Qt Version:" << QT_VERSION_STR;
  QApplication app(argc, argv);
  // setup GUI
  QWidget qWinMain;
  qWinMain.setWindowTitle("Test Background Image");
  qWinMain.resize(640, 480);
  qWinMain.setObjectName("Widget");
  qWinMain.setStyleSheet("#Widget { background-image: url(:/cat.jpg); }");
  qWinMain.show();
  // runtime loop
  return app.exec();
}

实际上,唯一的变化是url(cat.jpg)url(:/cat.jpg)

Qt资源文件testQWidgetBackgroundImage.qrc:

<!DOCTYPE RCC>
<RCC version="1.0">
  <qresource>
    <file>cat.jpg</file>
  </qresource>
</RCC>

Qt项目文件testQWidgetBackgroundImage.pro:

SOURCES = testQWidgetBackgroundImage.cc

RESOURCES = testQWidgetBackgroundImage.qrc

QT += widgets

cygwin64 中构建和测试:

$ qmake-qt5 testQWidgetBackgroundImage.pro

$ make && ./testQWidgetBackgroundImage 
g++ -c -fno-keep-inline-dllexport -D_GNU_SOURCE -pipe -O2 -Wall -W -D_REENTRANT -DQT_NO_DEBUG -DQT_WIDGETS_LIB -DQT_GUI_LIB -DQT_CORE_LIB -I. -isystem /usr/include/qt5 -isystem /usr/include/qt5/QtWidgets -isystem /usr/include/qt5/QtGui -isystem /usr/include/qt5/QtCore -I. -I/usr/lib/qt5/mkspecs/cygwin-g++ -o testQWidgetBackgroundImage.o testQWidgetBackgroundImage.cc
/usr/lib/qt5/bin/rcc -name testQWidgetBackgroundImage testQWidgetBackgroundImage.qrc -o qrc_testQWidgetBackgroundImage.cpp
g++ -c -fno-keep-inline-dllexport -D_GNU_SOURCE -pipe -O2 -Wall -W -D_REENTRANT -DQT_NO_DEBUG -DQT_WIDGETS_LIB -DQT_GUI_LIB -DQT_CORE_LIB -I. -isystem /usr/include/qt5 -isystem /usr/include/qt5/QtWidgets -isystem /usr/include/qt5/QtGui -isystem /usr/include/qt5/QtCore -I. -I/usr/lib/qt5/mkspecs/cygwin-g++ -o qrc_testQWidgetBackgroundImage.o qrc_testQWidgetBackgroundImage.cpp
g++  -o testQWidgetBackgroundImage.exe testQWidgetBackgroundImage.o qrc_testQWidgetBackgroundImage.o   -lQt5Widgets -lQt5Gui -lQt5Core -lGL -lpthread 
Qt Version: 5.9.4

输出:

【讨论】:

  • 谢谢你,我试过了,他们都和我一起工作并解决了我的问题,但我真的不确定是什么导致了 Qt Creator 上的这个问题。我会将您的代码与生成的代码进行比较,看看我会得到什么。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2022-10-13
  • 1970-01-01
  • 1970-01-01
  • 2019-05-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多