Create a drawer in QWidget

[saeid0034]

Hello
I want to have some kind of drawer in my program (not exactly a drawer that for example we see in android app, I want icon of button inside of the to be visible when the drawer is close, I attached a draft of what Im after)


noticed how the background getting darker when the drawer opened?
I want a drawer that can open as an overlay to the main program page, and when its open put a shadow in all widget behind it...

I can simply create a QWidget and put it in a grid layout beside the main widget that going to hold all other pages, but problem with that is, if I try to open it (with QPropertyAnimation and changing size of it of course) it will just expand in same layer of the main widget, so it will shrink other widget down in order to expand... And this is not good

so Im thinking is it possible with QWidget?

I will attach an example that do what im looking for but in the wrong way that I said before at end of post

thank you all for helping

/--- example ---/
mainwindow.ui

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>783</width>
    <height>525</height>
   </rect>
  </property>
  <property name="sizePolicy">
   <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
    <horstretch>0</horstretch>
    <verstretch>0</verstretch>
   </sizepolicy>
  </property>
  <property name="minimumSize">
   <size>
    <width>783</width>
    <height>525</height>
   </size>
  </property>
  <property name="maximumSize">
   <size>
    <width>783</width>
    <height>525</height>
   </size>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralwidget">
   <layout class="QGridLayout" name="gridLayout">
    <item row="0" column="0">
     <widget class="QFrame" name="sideMenu">
      <property name="minimumSize">
       <size>
        <width>70</width>
        <height>0</height>
       </size>
      </property>
      <property name="maximumSize">
       <size>
        <width>70</width>
        <height>16777215</height>
       </size>
      </property>
      <property name="styleSheet">
       <string notr="true">background-color: rgb(83, 86, 94);
border-radius:8;</string>
      </property>
      <property name="frameShape">
       <enum>QFrame::StyledPanel</enum>
      </property>
      <property name="frameShadow">
       <enum>QFrame::Raised</enum>
      </property>
      <layout class="QFormLayout" name="formLayout">
       <item row="0" column="0">
        <widget class="QPushButton" name="menuButton">
         <property name="sizePolicy">
          <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
           <horstretch>0</horstretch>
           <verstretch>0</verstretch>
          </sizepolicy>
         </property>
         <property name="minimumSize">
          <size>
           <width>51</width>
           <height>51</height>
          </size>
         </property>
         <property name="maximumSize">
          <size>
           <width>51</width>
           <height>51</height>
          </size>
         </property>
         <property name="styleSheet">
          <string notr="true">QPushButton { background-color: rgb(197, 255, 134); }
QPushButton:hover { background-color: rgb(172, 222, 117); }
QPushButton:pressed { background-color: rgb(87, 112, 59); }</string>
         </property>
         <property name="text">
          <string>OPEN</string>
         </property>
        </widget>
       </item>
       <item row="1" column="0">
        <spacer name="verticalSpacer">
         <property name="orientation">
          <enum>Qt::Vertical</enum>
         </property>
         <property name="sizeHint" stdset="0">
          <size>
           <width>20</width>
           <height>40</height>
          </size>
         </property>
        </spacer>
       </item>
      </layout>
     </widget>
    </item>
    <item row="0" column="1">
     <widget class="QFrame" name="ppage">
      <property name="minimumSize">
       <size>
        <width>689</width>
        <height>507</height>
       </size>
      </property>
      <property name="maximumSize">
       <size>
        <width>689</width>
        <height>507</height>
       </size>
      </property>
      <property name="styleSheet">
       <string notr="true">background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 rgba(0, 0, 0, 255), stop:1 rgba(255, 255, 255, 255));
border-radius:8;</string>
      </property>
      <property name="frameShape">
       <enum>QFrame::StyledPanel</enum>
      </property>
      <property name="frameShadow">
       <enum>QFrame::Raised</enum>
      </property>
     </widget>
    </item>
   </layout>
  </widget>
 </widget>
 <resources/>
 <connections/>
</ui>

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QPropertyAnimation>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private slots:
    void toggle_animation();

private:
    Ui::MainWindow *ui;
    QPropertyAnimation *animation;
};
#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

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

    animation = new QPropertyAnimation(ui->sideMenu, "minimumWidth");

    QObject::connect(ui->menuButton, &QPushButton::released, this, &MainWindow::toggle_animation);
}

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

void MainWindow::toggle_animation()
{
    animation->stop();
    if (ui->sideMenu->width() == 70)
    {
        animation->setStartValue(ui->sideMenu->width());
        animation->setEndValue(250);
        ui->menuButton->setText("Close");
    }
    else
    {
        animation->setStartValue(ui->sideMenu->width());
        animation->setEndValue(70);
        ui->menuButton->setText("Open");
    }
    animation->setEasingCurve(QEasingCurve::InOutCubic);
    animation->setDuration(470);
    animation->start();
}

[SGaist]

Hi,

Your drawer is typically a widget that is not part of a layout. You position it manually within your main widget and then you should be able to expand it the way you want it.

[saeid0034]

@SGaist so I shouldn't use any kind of layout for holding drawer, and position it manually..?
yeah it could work, but that way I need to handle every resize manually...
and what about the shadow when the drawer opened?

[SGaist]

Full size transparent widget.

However, what else should be shown on your application ?

[saeid0034]

@SGaist the ui is as simple as I showed in original post, its just a stacked widget at middle and the drawer beside it

[SGaist]

Just thought of QRubberBand

[saeid0034]

@SGaist said in Create a drawer in QWidget:

Just thought of QRubberBand

thank you but im not sure how the QRubberBand can help me here

[SGaist]

It allows for an easy to use translucent overlay.

[saeid0034]

@SGaist said in Create a drawer in QWidget:

It allows for an easy to use translucent overlay.

oh yeah, interesting, can we set some kind of layout and widget inside it?

[SGaist]

It's a widget so yes.