Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Arrange widgets properly on a layout
Forum Updated to NodeBB v4.3 + New Features

Arrange widgets properly on a layout

Scheduled Pinned Locked Moved Solved General and Desktop
20 Posts 5 Posters 1.5k Views 2 Watching
  • 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.
  • tomyT tomy

    Hello all,

    Please cast a fresh eye over this part of a project and the output on both Windows, and Linux:

    DateOfHire.h:

    #ifndef DATEOFHIRE_H
    #define DATEOFHIRE_H
    
    #include <QDialog>
    
    class QLabel;
    class QDateEdit;
    class QLineEdit;
    class QPushButton;
    
    class DateOfHire : public QDialog
    {
        Q_OBJECT
    
    public:
        DateOfHire(QWidget *parent = nullptr);
    
    private:
        QLabel* name = nullptr;
        QLabel* title = nullptr;
        QLabel* hire = nullptr;
    
        QLineEdit* nameLineEdit = nullptr;
        QLineEdit* titleLineEdit = nullptr;
        QDateEdit* hireDateEdit = nullptr;
    
        QPushButton* ok = nullptr;
    };
    #endif // DATEOFHIRE_H
    

    DateOfHire.cpp:

    #include "dateofhire.h"
    
    #include <QLabel>
    #include <QLineEdit>
    #include <QDateEdit>
    #include <QPushButton>
    #include <QVBoxLayout>
    #include <QMessageBox>
    #include <QHBoxLayout>
    
    DateOfHire::DateOfHire(QWidget *parent)
        : QDialog(parent)
    {
        name = new QLabel(tr("Name"));
        title = new QLabel(tr("Title"));
        hire = new QLabel(tr("Hire"));
    
        nameLineEdit = new QLineEdit;
        titleLineEdit = new QLineEdit;
        hireDateEdit = new QDateEdit;
    
        ok = new QPushButton(tr("&OK"));
    
        QHBoxLayout* topHLyt = new QHBoxLayout;
        topHLyt->addWidget(name);
        topHLyt->addWidget(nameLineEdit);
    
        QHBoxLayout* midHLyt = new QHBoxLayout;
        midHLyt->addWidget(title);
        midHLyt->addWidget(titleLineEdit);
    
        QHBoxLayout* bottomHLyt = new QHBoxLayout;
        bottomHLyt->addWidget(hire);
        bottomHLyt->addWidget(hireDateEdit);
    
        QHBoxLayout* lastHLyt = new QHBoxLayout;
        lastHLyt->addStretch();
        lastHLyt->addWidget(ok);
    
        QVBoxLayout* mainLayout = new QVBoxLayout;
        mainLayout->addLayout(topHLyt);
        mainLayout->addLayout(midHLyt);
        mainLayout->addLayout(bottomHLyt);
        mainLayout->addLayout(lastHLyt);
    
        setLayout(mainLayout);
    }
    

    Screenshot from 2020-05-20 06-01-34.png
    Capture.PNG

    On Windows, the width of the lineEdits (and DateEdit) vary, which are set by sizeHint() I suppose, but they look rather messy. On Linux, that's even worse.
    I know that using setFixedWidth() I can modify them, but isn't there a better way, please?

    J.HilkJ Offline
    J.HilkJ Offline
    J.Hilk
    Moderators
    wrote on last edited by
    #4

    @tomy the easiest way to deal with this is to set the stretch factor of the columns either via designer or by code.

    stretch factor of 1, 2 will result in 1/3 width of column 1 and 2/3 width of column 2


    Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


    Q: What's that?
    A: It's blue light.
    Q: What does it do?
    A: It turns blue.

    1 Reply Last reply
    0
    • tomyT Offline
      tomyT Offline
      tomy
      wrote on last edited by
      #5

      Thanks all,

      The QFormLayout looks nice and applicable, with much less code:

      #include "dateofhire.h"
      
      #include <QLineEdit>
      #include <QDateEdit>
      #include <QPushButton>
      #include <QFormLayout>
      
      DateOfHire::DateOfHire(QWidget *parent)
          : QDialog(parent)
      {
          nameLineEdit = new QLineEdit;
          titleLineEdit = new QLineEdit;
          hireDateEdit = new QDateEdit;
          ok = new QPushButton(tr("&OK"));
      
          QFormLayout* form = new QFormLayout;
          form->addRow(tr("Name"), nameLineEdit);
          form->addRow(tr("Title"), titleLineEdit);
          form->addRow(tr("Hire"), hireDateEdit);
          form->addWidget(ok);
      
          setLayout(form);
      }
      

      The result looks:

      Capture.PNG

      While I need some Stretch for the button to look:

      Untitled.png

      @J-Hilk: Do you mean to use Q[V/H]BoxLayouts but add stretch for the layouts and the button, please? I only use pure code not designer.

      J.HilkJ 1 Reply Last reply
      1
      • VRoninV Offline
        VRoninV Offline
        VRonin
        wrote on last edited by VRonin
        #6

        Just set a QVBoxLayout as the main layout of the widget and add the buttonbox at the bottom. Use QFormLayout only for the form-like part of the widget and another layout for the rest

        Side note, dialogs standard buttons should use QDialogButtonBox instead of manual QPushButton to look native on all platforms

        DateOfHire::DateOfHire(QWidget *parent)
            : QDialog(parent)
        {
            nameLineEdit = new QLineEdit(this);
            titleLineEdit = new QLineEdit(this);
            hireDateEdit = new QDateEdit(this);
            buttonBox = new QDialogButtonBox(QDialogButtonBox::Ok, this);
            connect(buttonBox, &QDialogButtonBox::accepted, this, &QDialog::accept);
        
            QFormLayout* form = new QFormLayout;
            form->addRow(tr("Name"), nameLineEdit);
            form->addRow(tr("Title"), titleLineEdit);
            form->addRow(tr("Hire"), hireDateEdit);
            auto mainLay = new QVBoxLayout(this);
            mainLay->addlayout(form);
            mainLay->addWidget(buttonBox);
            
        }
        

        "La mort n'est rien, mais vivre vaincu et sans gloire, c'est mourir tous les jours"
        ~Napoleon Bonaparte

        On a crusade to banish setIndexWidget() from the holy land of Qt

        tomyT 1 Reply Last reply
        4
        • VRoninV VRonin

          Just set a QVBoxLayout as the main layout of the widget and add the buttonbox at the bottom. Use QFormLayout only for the form-like part of the widget and another layout for the rest

          Side note, dialogs standard buttons should use QDialogButtonBox instead of manual QPushButton to look native on all platforms

          DateOfHire::DateOfHire(QWidget *parent)
              : QDialog(parent)
          {
              nameLineEdit = new QLineEdit(this);
              titleLineEdit = new QLineEdit(this);
              hireDateEdit = new QDateEdit(this);
              buttonBox = new QDialogButtonBox(QDialogButtonBox::Ok, this);
              connect(buttonBox, &QDialogButtonBox::accepted, this, &QDialog::accept);
          
              QFormLayout* form = new QFormLayout;
              form->addRow(tr("Name"), nameLineEdit);
              form->addRow(tr("Title"), titleLineEdit);
              form->addRow(tr("Hire"), hireDateEdit);
              auto mainLay = new QVBoxLayout(this);
              mainLay->addlayout(form);
              mainLay->addWidget(buttonBox);
              
          }
          
          tomyT Offline
          tomyT Offline
          tomy
          wrote on last edited by tomy
          #7

          @VRonin

          Thank you. It worked.

          dialogs standard buttons should use QDialogButtonBox instead of manual QPushButton to look native on all platforms

          It doesn't look differently from a manual button on my Windows machine!

          I also used:

          mainLayout->addStretch();
          

          But why have you parented all those many widgets? They are all automatically parented by layouts.

          DateOfHire::DateOfHire(QWidget *parent)
              : QDialog(parent)
          {
              nameLineEdit = new QLineEdit;
              titleLineEdit = new QLineEdit;
              hireDateEdit = new QDateEdit;
              ok = new QDialogButtonBox(QDialogButtonBox::Ok);
          
              QFormLayout* form = new QFormLayout;
              form->addRow(tr("Name"), nameLineEdit);
              form->addRow(tr("Title"), titleLineEdit);
              form->addRow(tr("Hire"), hireDateEdit);
          
              auto mainLayout = new QVBoxLayout;
              mainLayout->addLayout(form);
              mainLayout->addStretch();
              mainLayout->addWidget(ok);
          
              setLayout(mainLayout);
          }
          
          JonBJ 1 Reply Last reply
          0
          • tomyT tomy

            @VRonin

            Thank you. It worked.

            dialogs standard buttons should use QDialogButtonBox instead of manual QPushButton to look native on all platforms

            It doesn't look differently from a manual button on my Windows machine!

            I also used:

            mainLayout->addStretch();
            

            But why have you parented all those many widgets? They are all automatically parented by layouts.

            DateOfHire::DateOfHire(QWidget *parent)
                : QDialog(parent)
            {
                nameLineEdit = new QLineEdit;
                titleLineEdit = new QLineEdit;
                hireDateEdit = new QDateEdit;
                ok = new QDialogButtonBox(QDialogButtonBox::Ok);
            
                QFormLayout* form = new QFormLayout;
                form->addRow(tr("Name"), nameLineEdit);
                form->addRow(tr("Title"), titleLineEdit);
                form->addRow(tr("Hire"), hireDateEdit);
            
                auto mainLayout = new QVBoxLayout;
                mainLayout->addLayout(form);
                mainLayout->addStretch();
                mainLayout->addWidget(ok);
            
                setLayout(mainLayout);
            }
            
            JonBJ Offline
            JonBJ Offline
            JonB
            wrote on last edited by JonB
            #8

            @tomy said in Arrange widgets properly on a layout:

            It doesn't look differently from a manual button on my Windows machine!

            Well it may do elsewhere. And QDialogButtonBox can also be about the layout/positioning of the buttons, not just their look. See the examples at https://doc.qt.io/archives/qt-4.8/qdialogbuttonbox.html#details.

            But why have you parented all those many widgets? They are all automatically parented by layouts.

            This is a matter of style, and @VRonin chooses to parent all of his explicitly. Nothing wrong with that. I admit I don't if I'm about to put them on something, but then I am obsessive about the least possible amount of typing :) @VRonin's code will, for example, be less likely to leak if for whatever reason you exit the method early, or hide something without adding it to a layout.

            1 Reply Last reply
            1
            • tomyT tomy

              Thanks all,

              The QFormLayout looks nice and applicable, with much less code:

              #include "dateofhire.h"
              
              #include <QLineEdit>
              #include <QDateEdit>
              #include <QPushButton>
              #include <QFormLayout>
              
              DateOfHire::DateOfHire(QWidget *parent)
                  : QDialog(parent)
              {
                  nameLineEdit = new QLineEdit;
                  titleLineEdit = new QLineEdit;
                  hireDateEdit = new QDateEdit;
                  ok = new QPushButton(tr("&OK"));
              
                  QFormLayout* form = new QFormLayout;
                  form->addRow(tr("Name"), nameLineEdit);
                  form->addRow(tr("Title"), titleLineEdit);
                  form->addRow(tr("Hire"), hireDateEdit);
                  form->addWidget(ok);
              
                  setLayout(form);
              }
              

              The result looks:

              Capture.PNG

              While I need some Stretch for the button to look:

              Untitled.png

              @J-Hilk: Do you mean to use Q[V/H]BoxLayouts but add stretch for the layouts and the button, please? I only use pure code not designer.

              J.HilkJ Offline
              J.HilkJ Offline
              J.Hilk
              Moderators
              wrote on last edited by
              #9

              @tomy said in Arrange widgets properly on a layout:

              @J-Hilk: Do you mean to use Q[V/H]BoxLayouts but add stretch for the layouts and the button, please? I only use pure code not designer.

              I meant
              https://doc.qt.io/qt-5/qboxlayout.html#setStretch

              myLayout->setStretch(0,1);
              myLayout->setStretch(1,2);

              @JonB It's not entirely style only.

              Reparenting will cause a chain of recalculating in the layout and other stuff. It's usually more efficient so create layout items without a parent ;)


              Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


              Q: What's that?
              A: It's blue light.
              Q: What does it do?
              A: It turns blue.

              JonBJ VRoninV 2 Replies Last reply
              0
              • J.HilkJ J.Hilk

                @tomy said in Arrange widgets properly on a layout:

                @J-Hilk: Do you mean to use Q[V/H]BoxLayouts but add stretch for the layouts and the button, please? I only use pure code not designer.

                I meant
                https://doc.qt.io/qt-5/qboxlayout.html#setStretch

                myLayout->setStretch(0,1);
                myLayout->setStretch(1,2);

                @JonB It's not entirely style only.

                Reparenting will cause a chain of recalculating in the layout and other stuff. It's usually more efficient so create layout items without a parent ;)

                JonBJ Offline
                JonBJ Offline
                JonB
                wrote on last edited by
                #10

                @J-Hilk said in Arrange widgets properly on a layout:

                @JonB It's not entirely style only.
                Reparenting will cause a chain of recalculating in the layout and other stuff. It's usually more efficient so create layout items without a parent ;)

                I don't understand. In the code @VRonin pasted, what reparenting will be going on?

                nameLineEdit = new QLineEdit(this);
                form->addRow(tr("Name"), nameLineEdit);
                

                After the second line, how will the parent be any different from the this he passes as parent in the first line?

                J.HilkJ 1 Reply Last reply
                0
                • JonBJ JonB

                  @J-Hilk said in Arrange widgets properly on a layout:

                  @JonB It's not entirely style only.
                  Reparenting will cause a chain of recalculating in the layout and other stuff. It's usually more efficient so create layout items without a parent ;)

                  I don't understand. In the code @VRonin pasted, what reparenting will be going on?

                  nameLineEdit = new QLineEdit(this);
                  form->addRow(tr("Name"), nameLineEdit);
                  

                  After the second line, how will the parent be any different from the this he passes as parent in the first line?

                  J.HilkJ Offline
                  J.HilkJ Offline
                  J.Hilk
                  Moderators
                  wrote on last edited by
                  #11

                  @JonB from here
                  https://doc.qt.io/archives/qt-4.8/layout.html

                  Tips for Using Layouts

                  When you use a layout, you do not need to pass a parent when constructing the child widgets. The layout will automatically reparent the widgets (using QWidget::setParent()) so that they are children of the widget on which the layout is installed.

                  Note: Widgets in a layout are children of the widget on which the layout is installed, not of the layout itself. Widgets can only have other widgets as parent, not layouts.

                  You can nest layouts using addLayout() on a layout; the inner layout then becomes a child of the layout it is inserted into.

                  so, you're right in this example, the overall parent will be the widget that was the parent for the lineEdit, but only at the end.

                  The Layout does not have an owner in the beginning, so I assume(haven't checked) it will reparent to a null ptr and then reparent the the original parent, when it's assigned to a widget


                  Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                  Q: What's that?
                  A: It's blue light.
                  Q: What does it do?
                  A: It turns blue.

                  JonBJ 1 Reply Last reply
                  0
                  • J.HilkJ J.Hilk

                    @tomy said in Arrange widgets properly on a layout:

                    @J-Hilk: Do you mean to use Q[V/H]BoxLayouts but add stretch for the layouts and the button, please? I only use pure code not designer.

                    I meant
                    https://doc.qt.io/qt-5/qboxlayout.html#setStretch

                    myLayout->setStretch(0,1);
                    myLayout->setStretch(1,2);

                    @JonB It's not entirely style only.

                    Reparenting will cause a chain of recalculating in the layout and other stuff. It's usually more efficient so create layout items without a parent ;)

                    VRoninV Offline
                    VRoninV Offline
                    VRonin
                    wrote on last edited by
                    #12

                    @J-Hilk said in Arrange widgets properly on a layout:

                    Reparenting will cause a chain of recalculating in the layout and other stuff. It's usually more efficient so create layout items without a parent ;)

                    Layouts are QObjects, not QWidgets so they don't own widgets.
                    The parent of a widget will always be a widget so in my code above there is no reparenting going on at all.
                    Passing the parent in the constructor is just one of those things that sometimes don't do anything but you never want to forget when it's needed, hence I always parent QObjects on construction when I can.

                    "La mort n'est rien, mais vivre vaincu et sans gloire, c'est mourir tous les jours"
                    ~Napoleon Bonaparte

                    On a crusade to banish setIndexWidget() from the holy land of Qt

                    1 Reply Last reply
                    0
                    • J.HilkJ J.Hilk

                      @JonB from here
                      https://doc.qt.io/archives/qt-4.8/layout.html

                      Tips for Using Layouts

                      When you use a layout, you do not need to pass a parent when constructing the child widgets. The layout will automatically reparent the widgets (using QWidget::setParent()) so that they are children of the widget on which the layout is installed.

                      Note: Widgets in a layout are children of the widget on which the layout is installed, not of the layout itself. Widgets can only have other widgets as parent, not layouts.

                      You can nest layouts using addLayout() on a layout; the inner layout then becomes a child of the layout it is inserted into.

                      so, you're right in this example, the overall parent will be the widget that was the parent for the lineEdit, but only at the end.

                      The Layout does not have an owner in the beginning, so I assume(haven't checked) it will reparent to a null ptr and then reparent the the original parent, when it's assigned to a widget

                      JonBJ Offline
                      JonBJ Offline
                      JonB
                      wrote on last edited by
                      #13

                      @J-Hilk said in Arrange widgets properly on a layout:

                      The Layout does not have an owner in the beginning, so I assume(haven't checked) it will reparent to a null ptr and then reparent the the original parent, when it's assigned to a widget

                      Hmm. So you're saying when he goes form->addRow(tr("Name"), nameLineEdit); that will unparent the widget, and only later reset it to the original this parent when he later ultimately goes setLayout(mainLayout); causing everything to reparent, is that right?

                      EDIT I see @VRonin has just come to hos own defence! Saying what I said. Clearly this needs investigation if I really want to know what is going on....

                      VRoninV 1 Reply Last reply
                      0
                      • JonBJ JonB

                        @J-Hilk said in Arrange widgets properly on a layout:

                        The Layout does not have an owner in the beginning, so I assume(haven't checked) it will reparent to a null ptr and then reparent the the original parent, when it's assigned to a widget

                        Hmm. So you're saying when he goes form->addRow(tr("Name"), nameLineEdit); that will unparent the widget, and only later reset it to the original this parent when he later ultimately goes setLayout(mainLayout); causing everything to reparent, is that right?

                        EDIT I see @VRonin has just come to hos own defence! Saying what I said. Clearly this needs investigation if I really want to know what is going on....

                        VRoninV Offline
                        VRoninV Offline
                        VRonin
                        wrote on last edited by
                        #14

                        @JonB said in Arrange widgets properly on a layout:

                        So you're saying when he goes form->addRow(tr("Name"), nameLineEdit); that will unparent the widget, and only later reset it to the original this parent when he later ultimately goes setLayout(mainLayout); causing everything to reparent, is that right?

                        Nope. If the layout is not set on a widget it will not change parenting of widgets added to it. Source: https://code.woboq.org/qt5/qtbase/src/widgets/kernel/qlayout.cpp.html#_ZN7QLayout14addChildWidgetEP7QWidget

                        "La mort n'est rien, mais vivre vaincu et sans gloire, c'est mourir tous les jours"
                        ~Napoleon Bonaparte

                        On a crusade to banish setIndexWidget() from the holy land of Qt

                        JonBJ 1 Reply Last reply
                        3
                        • VRoninV VRonin

                          @JonB said in Arrange widgets properly on a layout:

                          So you're saying when he goes form->addRow(tr("Name"), nameLineEdit); that will unparent the widget, and only later reset it to the original this parent when he later ultimately goes setLayout(mainLayout); causing everything to reparent, is that right?

                          Nope. If the layout is not set on a widget it will not change parenting of widgets added to it. Source: https://code.woboq.org/qt5/qtbase/src/widgets/kernel/qlayout.cpp.html#_ZN7QLayout14addChildWidgetEP7QWidget

                          JonBJ Offline
                          JonBJ Offline
                          JonB
                          wrote on last edited by JonB
                          #15

                          @VRonin said in Arrange widgets properly on a layout:

                          Nope. If the layout is not set on a widget it will not change parenting of widgets added to it.

                          That's what I thought! Now I don't know whom to believe... ;-) I respect both you & @J-Hilk , I'm torn....

                          1 Reply Last reply
                          0
                          • J.HilkJ Offline
                            J.HilkJ Offline
                            J.Hilk
                            Moderators
                            wrote on last edited by J.Hilk
                            #16

                            I said I assume ;) it reparents to nullptr

                            so clearly I was wrong 🙈


                            Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                            Q: What's that?
                            A: It's blue light.
                            Q: What does it do?
                            A: It turns blue.

                            1 Reply Last reply
                            1
                            • tomyT Offline
                              tomyT Offline
                              tomy
                              wrote on last edited by
                              #17

                              I tend to use parenting using the layouts and find it better and nicer (less verbose).
                              But how could "exiting the method early" happen in an example, please?

                              VRoninV JonBJ 2 Replies Last reply
                              0
                              • tomyT tomy

                                I tend to use parenting using the layouts and find it better and nicer (less verbose).
                                But how could "exiting the method early" happen in an example, please?

                                VRoninV Offline
                                VRoninV Offline
                                VRonin
                                wrote on last edited by
                                #18

                                I tend to use parenting using the layouts and find it better and nicer (less verbose).

                                it's just personal preference, both methods are basically equivalent

                                But how could "exiting the method early" happen in an example, please?

                                for example if something throws before you set the layout you leak memory. not a problem in this code

                                "La mort n'est rien, mais vivre vaincu et sans gloire, c'est mourir tous les jours"
                                ~Napoleon Bonaparte

                                On a crusade to banish setIndexWidget() from the holy land of Qt

                                1 Reply Last reply
                                2
                                • tomyT tomy

                                  I tend to use parenting using the layouts and find it better and nicer (less verbose).
                                  But how could "exiting the method early" happen in an example, please?

                                  JonBJ Offline
                                  JonBJ Offline
                                  JonB
                                  wrote on last edited by JonB
                                  #19

                                  @tomy said in Arrange widgets properly on a layout:

                                  But how could "exiting the method early" happen in an example, please?

                                  Apart from throwing, if a developer puts in e.g. a if (...) return statement. Or an if generally, and a widget is left unparented, for whatever reason. You & I might notice, someone else might not :) Just saying.

                                  tomyT 1 Reply Last reply
                                  0
                                  • JonBJ JonB

                                    @tomy said in Arrange widgets properly on a layout:

                                    But how could "exiting the method early" happen in an example, please?

                                    Apart from throwing, if a developer puts in e.g. a if (...) return statement. Or an if generally, and a widget is left unparented, for whatever reason. You & I might notice, someone else might not :) Just saying.

                                    tomyT Offline
                                    tomyT Offline
                                    tomy
                                    wrote on last edited by
                                    #20

                                    @JonB

                                    I see these scenarios, yeah, but these may happen much rarely. Normally constructor's code is quite clean, straightforward and without these stuff.

                                    1 Reply Last reply
                                    0

                                    • Login

                                    • Login or register to search.
                                    • First post
                                      Last post
                                    0
                                    • Categories
                                    • Recent
                                    • Tags
                                    • Popular
                                    • Users
                                    • Groups
                                    • Search
                                    • Get Qt Extensions
                                    • Unsolved