Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Unsolved Create a drawer in QWidget

    General and Desktop
    2
    13
    735
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S
      saeid0034 last edited by

      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();
      }
      
      1 Reply Last reply Reply Quote 0
      • SGaist
        SGaist Lifetime Qt Champion last edited by

        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.

        Interested in AI ? www.idiap.ch
        Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

        S 1 Reply Last reply Reply Quote 1
        • S
          saeid0034 @SGaist last edited by

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

          1 Reply Last reply Reply Quote 0
          • SGaist
            SGaist Lifetime Qt Champion last edited by

            Full size transparent widget.

            However, what else should be shown on your application ?

            Interested in AI ? www.idiap.ch
            Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

            S 1 Reply Last reply Reply Quote 1
            • S
              saeid0034 @SGaist last edited by

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

              1 Reply Last reply Reply Quote 0
              • SGaist
                SGaist Lifetime Qt Champion last edited by

                Just thought of QRubberBand

                Interested in AI ? www.idiap.ch
                Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

                S 1 Reply Last reply Reply Quote 1
                • S
                  saeid0034 @SGaist last edited by

                  @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

                  1 Reply Last reply Reply Quote 0
                  • SGaist
                    SGaist Lifetime Qt Champion last edited by

                    It allows for an easy to use translucent overlay.

                    Interested in AI ? www.idiap.ch
                    Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

                    S 1 Reply Last reply Reply Quote 1
                    • S
                      saeid0034 @SGaist last edited by

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

                      1 Reply Last reply Reply Quote 0
                      • SGaist
                        SGaist Lifetime Qt Champion last edited by

                        It's a widget so yes.

                        Interested in AI ? www.idiap.ch
                        Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

                        S 1 Reply Last reply Reply Quote 1
                        • S
                          saeid0034 @SGaist last edited by

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

                          1 Reply Last reply Reply Quote 0
                          • SGaist
                            SGaist Lifetime Qt Champion last edited by

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

                            Interested in AI ? www.idiap.ch
                            Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

                            S 1 Reply Last reply Reply Quote 1
                            • S
                              saeid0034 @SGaist last edited by 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...

                              1 Reply Last reply Reply Quote 0
                              • First post
                                Last post