How do you add Dropshadow on QWidgets?

deleted385

In my MainWindow, I've these:

stack = new QStackedWidget(this);
queryWidget = new QueryWidget(stack);
tableWidget = new TableWidget(stack);
stack->addWidget(queryWidget);
stack->addWidget(tableWidget);
setCentralWidget(stack);

and in the QueryWidget, I've tried these:

QueryWidget::QueryWidget(QWidget *parent) : QWidget(parent)
{
    auto objectEffect = new QGraphicsDropShadowEffect;
    objectEffect->setBlurRadius(10);
    objectEffect->setColor(Qt::black);
    objectEffect->setOffset(0,0);
    auto codeEffect = new QGraphicsDropShadowEffect;
    codeEffect->setBlurRadius(10);
    codeEffect->setColor(Qt::black);
    codeEffect->setOffset(0,0);
    auto resultEffect = new QGraphicsDropShadowEffect;
    resultEffect->setBlurRadius(10);
    resultEffect->setColor(Qt::black);
    resultEffect->setOffset(0,0);
    auto logEffect = new QGraphicsDropShadowEffect;
    logEffect->setBlurRadius(10);
    logEffect->setColor(Qt::black);
    logEffect->setOffset(0,0);
    QPalette palette;
    palette.setColor(QPalette::Window, Qt::white);

    // these are subclass of QWidget
    objects = new ObjectsView();
    codeEditor = new QueryView();
    queryresult = new QueryResultView();
    log = new LogView();
    
    objects->setAutoFillBackground(true);
    codeEditor->setAutoFillBackground(true);
    queryresult->setAutoFillBackground(true);
    log->setAutoFillBackground(true);

    objects->setPalette(palette);
    codeEditor->setPalette(palette);
    queryresult->setPalette(palette);
    log->setPalette(palette);   

    objects->setGraphicsEffect(objectEffect);
    codeEditor->setGraphicsEffect(codeEffect);
    queryresult->setGraphicsEffect(resultEffect);
    log->setGraphicsEffect(logEffect);

    auto split1 = new QSplitter(Qt::Vertical, this);
    auto split2 = new QSplitter(Qt::Horizontal, this);

    split1->addWidget(codeEditor);
    split1->addWidget(log);
    split2->addWidget(objects);
    split2->addWidget(split1);
    split2->addWidget(queryresult);
    auto vLay = new QVBoxLayout(this);
    vLay->addWidget(split2);
    ...
}

I wanted to achieve something like this:

on the left is what I desired and on the right is what my code in the constructor of QueryWidget produced.

deleted385

That's a tricky thing for noobs! First, in the toplevel widget (in my case QueryWidget) apply the effect like this:

QueryWidget::QueryWidget(QWidget *parent) : QWidget(parent){
    ...
    auto effect = new QGraphicsDropShadowEffect;
    effect->setBlurRadius(15);
    effect->setColor(Qt::black);
    effect->setOffset(0,0);
    setGraphicsEffect(effect);
}

in the child widgets (in my case ObjectsView, QueryView, QueryResultView and LogView) have something in setPalette and call setAutoFillBackground(true);. I've created another round corner widget and all child widgets inherits it:

RoundWidget::RoundWidget(QWidget *parent) : QWidget(parent){
    ...
    setPalette(QPalette(Qt::white));
    setAutoFillBackground(true);
    ...
}

and finally subclass QSplitter and make the Palette of the handle transparent like this:

Splitter::Splitter(Qt::Orientation o, QWidget *p) : QSplitter(o, p){}
QSplitterHandle *Splitter::createHandle(){
    auto handle = new QSplitterHandle(orientation(), this);
    handle->setPalette(QPalette(Qt::transparent));
    return handle;
}

and use this Splitter in toplevel widget. You'll see something like this:

I get some weird effect on the rounded edges and in some other places when I resize widgets with invisible handles.

mpergand

void QWidget::setGraphicsEffect(QGraphicsEffect *effect)
Note: This function will apply the effect on itself and all its children.

Try to apply to the parent widget.

deleted385

@mpergand, if I remove those effects from these:

objects = new ObjectsView();
codeEditor = new QueryView();
queryresult = new QueryResultView();
log = new LogView();

and add effects to split1 and split2 like this:

split1->setGraphicsEffect(split1Effect);
split2->setGraphicsEffect(split2Effect);

it looks like this:

deleted385

With a custom QSPlitter, this is how it looks:

and I don't get resize grip when I point mouse in between widgets, I've to have a minimum size for the QSplitterHandle:

Splitter::Splitter(Qt::Orientation o, QWidget *p) : QSplitter(o, p){
    auto effect = new QGraphicsDropShadowEffect;
    effect->setBlurRadius(15);
    effect->setColor(Qt::gray);
    effect->setOffset(0,0);
    setGraphicsEffect(effect);
    setContentsMargins(0,0,0,0);
}
QSplitterHandle *Splitter::createHandle(){
    auto handle = new QSplitterHandle(orientation(), this);
    auto layout = new QHBoxLayout(handle);
    auto line = new QFrame(handle);
    handle->setMaximumSize(10,10);
    layout->addWidget(line);
    layout->setContentsMargins(0,0,0,0);
    line->setAutoFillBackground(true);
    line->setPalette(QPalette(Qt::red));
    line->setFrameStyle(QFrame::Raised);
    line->setFrameShape(QFrame::StyledPanel);
    line->setFrameShadow(QFrame::Sunken);
    //handle->hide();
    //handle->setVisible(false);
    //handle->setHidden(true);
    return handle;
}

and move mouse over the handle to get the grip and it doesn't hide.

deleted385

That's a tricky thing for noobs! First, in the toplevel widget (in my case QueryWidget) apply the effect like this:

QueryWidget::QueryWidget(QWidget *parent) : QWidget(parent){
    ...
    auto effect = new QGraphicsDropShadowEffect;
    effect->setBlurRadius(15);
    effect->setColor(Qt::black);
    effect->setOffset(0,0);
    setGraphicsEffect(effect);
}

in the child widgets (in my case ObjectsView, QueryView, QueryResultView and LogView) have something in setPalette and call setAutoFillBackground(true);. I've created another round corner widget and all child widgets inherits it:

RoundWidget::RoundWidget(QWidget *parent) : QWidget(parent){
    ...
    setPalette(QPalette(Qt::white));
    setAutoFillBackground(true);
    ...
}

and finally subclass QSplitter and make the Palette of the handle transparent like this:

Splitter::Splitter(Qt::Orientation o, QWidget *p) : QSplitter(o, p){}
QSplitterHandle *Splitter::createHandle(){
    auto handle = new QSplitterHandle(orientation(), this);
    handle->setPalette(QPalette(Qt::transparent));
    return handle;
}

and use this Splitter in toplevel widget. You'll see something like this:

I get some weird effect on the rounded edges and in some other places when I resize widgets with invisible handles.