0

I'm trying to learn how to develop a Qt GUI using only C++.

as a first test I've tried to create a simple login app. but I've ran into an issue when I tried to add add style to my page. Basically the style i set using setStyle() gets ignored when a widget is inside my own widget. Here is what i mean :

First i've got a main which creates an app an a GlobalContainer (we'll see this one right after)

#include <iostream>

#include <QtCore/QtCore>
#include <QtGui/QtGui>
#include <QtWidgets/QApplication>
#include <QtWidgets/QPushButton>
#include <QtWidgets/QGroupBox>

#include "GlobalContainer.hpp"

int main(int argc, char *argv[])
{
    int width = 800;
    int height = 600;    

    /* gets size passed as parameter or set it to screen size */


    QApplication app(argc, argv);

    GlobalContainer container(width, height);

    /* I want to use a file to set my style this is why i apply it to the app directly */
    app.setStyleSheet(
        "GlobalContainer {\
            background-color: #000000;\
        }\
        GlobalContainer:hover {\
            background-color: #ffffff;\
        }"

    );

    container.show();
    return (app.exec());
}

In addition to that, i have my GlobalContainer Class (Header)

#ifndef GLOBAL_CONTAINER_HPP_
    #define GLOBAL_CONTAINER_HPP_

    #include <QtWidgets/QWidget>

    #include "pages/Login.hpp"

    class GlobalContainer : public QWidget {
        
        Q_OBJECT

        public:
            GlobalContainer(int width = 800, int height = 600, QWidget *parent = nullptr);
            ~GlobalContainer();

        protected:

        private:
            // QPushButton button;

    };

#endif

(Content)

#include "GlobalContainer.hpp"

#include <QtCore/QtCore>

GlobalContainer::GlobalContainer(int width, int height, QWidget *parent): QWidget(parent)
// , button(this)
{
    setWindowTitle(QCoreApplication::translate("GlobalContainer", "MyApp", nullptr));

    setObjectName(QString::fromUtf8("MainWidget"));
    resize(width, height);

    // This was my first test where i apply style to each of my compnents individualy 
    // This did not worked either 


    // setStyleSheet(
    //     "GlobalContainer {\
    //         background-color: #000000;\
    //     }\
    //     GlobalContainer:hover {\
    //         background-color: #ffffff;\
    //     }"

    // );

}

GlobalContainer::~GlobalContainer()
{
}

This code works as expected, when i hover my app background goes white

but if i uncomment

QPushButton button; // in header file

, button(this) // in cpp file

everything break and my background doesn't turn black/white

Since i'm a beginner with Qt, i've also tried to create an app using QtCreator but even through this, the app i've get from embedded designer and at runtime didn't output the same way, so i wasn't able to take inspiration from this

If anyone knows what i'm currently missing an/or what i need to fix my problem, any help would be appreciate.

Thanks by advance

EDIT : After some further testing I've found out that inheritance is the source of the issue, i still does not understand how but actively looking for it. I've managed to find is out through these steps : First i need to add a Qwidget which will serve us as a layer :

class GlobalContainer : public QWidget {

    Q_OBJECT

    public:
        GlobalContainer(int width = 800, int height = 600, QWidget *parent = nullptr);
        ~GlobalContainer();
        void init(void);

    protected:

    private:
        QWidget layoutWidget;
        QPushButton button;
};

then init your layout and your button with layout parent of button

GlobalContainer::GlobalContainer(int width, int height, QWidget *parent): 
    QWidget(parent)
, layoutWidget(this)
, button(&layoutWidget)
{
    // fill with same thing as the ctor defined above
}

in a new finction init (could be done in the ctor i think) initalize the layout and the button

layoutWidget.setObjectName(QString::fromUtf8("layoutWidget"));
layoutWidget.setGeometry(QRect(100, 190, 327, 236));
layoutWidget.setStyleSheet(
    "#layoutWidget {\
        background-color: #ff0000;\
    }\
    #layoutWidget:hover {\
        background-color: #0000ff;\
    }"
);

button.setText("Test");

call init in the main before container.show()

You will have a red rectangle which, on hover turn blue but the background will stay white instead of turning from black to white

Dzious
  • 169
  • 2
  • 14
  • Are you sure your style sheet is actually having any effect? What if you change the `hover` background colour to `#ff0000`? – G.M. Aug 12 '21 at 12:30
  • The style sheet does work when the button is disable (commented) but does not work anymore when the button is enable (not commented) – Dzious Aug 12 '21 at 12:36

0 Answers0