QWidget的背景應用於其所有QWidget子級

Question

我選擇使用Qt來管理我正在處理的項目的GUI。

在找到如何在QWidget底部應用圖片之后，我注意到它會對添加到其中的所有組件產生影響。

無論通過setStyleSheet方法或什至使用QPixmap應用的樣式，這些元素的背景始終是為QWidget容器定義的圖像。

如何避免這種行為？

這是我的代碼：

MainMenu::MainMenu(QWidget* Parent, const QPoint& Position, const QSize& Size) : QWidget(Parent) {

    QString qwidgetStyle = "QWidget {background-image: url(background.jpg); border: 5px solid rgba(3, 5, 28, 1);}";
    QString buttonStyle = "color: rgba(73, 123, 176, 1); font-size:30px; background-color: rgba(73, 123, 176, 1);";

    move(Position);
    resize(Size);   
    setStyleSheet(qwidgetStyle);

    // Menu title
    QLabel *title = new QLabel(this);
    title->setText("Menu");
    title->setStyleSheet(buttonStyle);
    title->setAlignment(Qt::AlignCenter);

    // Menu buttons
    // Play
    buttonPlay = new QPushButton("Play");
    (*buttonPlay).setEnabled(true);
    (*buttonPlay).setStyleSheet(buttonStyle);
    connect(buttonPlay, SIGNAL(clicked()), this, SLOT(handleButton()));
    // Option
    buttonOptions = new QPushButton("Options", this);
    (*buttonOptions).setEnabled(true);
    (*buttonOptions).setGeometry(250, 175, 100, 50);
    (*buttonOptions).setStyleSheet(buttonStyle);
    connect(buttonOptions, SIGNAL(clicked()), this, SLOT(handleButton()));
    // Quit
    buttonQuit = new QPushButton("Quit", this);
    (*buttonQuit).setEnabled(true);
    (*buttonQuit).setGeometry(250, 275, 100, 50);
    (*buttonQuit).setStyleSheet(buttonStyle);
    connect(buttonQuit, SIGNAL(clicked()), this, SLOT(handleButton()));

    // Layout
    QGridLayout *layout = new QGridLayout;
    layout->setMargin(50);
    layout->addWidget(title, 0, 0, 1, 5);
    layout->addWidget(buttonPlay, 3, 1, 2, 3);
    layout->addWidget(buttonOptions, 4, 1, 2, 3);
    layout->addWidget(buttonQuit, 5, 1, 2, 3);
    setLayout(layout);

    show();
}

Answer 1

由於以下幾行，因此您遇到的行為是完全正常的：

QString qwidgetStyle = "QWidget {background-image: url(background.jpg); border: 5px solid rgba(3, 5, 28, 1);}";
...
setStyleSheet(qwidgetStyle);

在這里，您只是告訴Qt使用關鍵字QWidget將qwidgetstyle應用於應用程序的每個 QWidget 。 這就是為什么在Qt中，如果要將樣式應用於此特定對象，最好為該對象設置一個名稱。

在代碼中， QLabel和QPushButton都繼承自QWidget ，因此它們將具有您為QWidget定義的樣式， 除非您為它們命名或為每個樣式指定樣式 。

如果您要為MainMenu設置樣式表，該樣式表直接繼承自QWidget （這是您首先要做的事情），則必須設置一個名稱，然后應用樣式：

setObjectName("MainMenu");
QString qwidgetStyle = "QWidget#MainMenu {background-image: url(background.jpg); border: 5px solid rgba(3, 5, 28, 1);}";
setStyleSheet(qwidgetStyle);  // here, only your MainMenu will have the style "qwidgetstyle"

請注意，例如，您可以為每個QWidget設置相同的樣式表，並且只為MainMenu添加特定的顏色：

// this is in a CSS, but you can apply it directly from the MainMenu constructor of course
QWidget, QWidget#MainMenu {
    background-image: url(background.jpg); 
    border: 5px solid rgba(3, 5, 28, 1);
} // aplied to all QWidget

QWidget#MainMenu { 
    color : #9b9b9b; // a nice grey, only applied to MainMenu
}

同樣，在使用樣式表時要特別說明，否則您的應用程序中到處都會有奇怪的顏色/對齊方式:)。 希望有幫助！

注意：您也可以感謝@PaulRooney，他在評論中給出了很好的鏈接。