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.

saeid0034

@SGaist let me bring this old topic up, I wanted to try and use QRubberband as what I wanted, the drawing is simple as you said, but Im not sure how can I use it as an widget... can you help me a little?
thank you.

SGaist

Well, it is a widget, so you can do with it the same things a with a QWidget.

saeid0034

@SGaist oh ok, but tbh I can't see how it would be better, because mostly I need to do the same thing that I have to do in QFrame in QRubberBand too...
for example if I want to do it with A QFrame the steps would be

1- create a Frame but dont put it in any layout
2- manually set its position
3- handle resize event on it, so its resize with the gui

what I think is good way for it is, creating a empty frame as a placeholder (why? see the concept in first post)
then use that to move and resize the layoutless widget, and done.
the only problem that I currently have is how to resize the layoutless widget with animation, I mean if I want to use the normal way (I mean creating a QPropertyAnimation with Drawer as parent and minimumWidth as propertyName) it will only work when I want to expand the drawer, not the other way...