Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Create a drawer in QWidget



  • 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)
    ae9d9b6a-6e28-4328-a6da-ea847e19a605-image.png
    11eb8749-632a-4d32-884b-8bfec4c149c5-image.png
    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();
    }
    

  • Lifetime Qt Champion

    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.



  • @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?


  • Lifetime Qt Champion

    Full size transparent widget.

    However, what else should be shown on your application ?



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


  • Lifetime Qt Champion

    Just thought of QRubberBand



  • @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


  • Lifetime Qt Champion

    It allows for an easy to use translucent overlay.



  • @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?


  • Lifetime Qt Champion

    It's a widget so yes.


Log in to reply