Squared button in Qt Designer

Question

I'm using Qt Creator with the 'Design' tool and I have grid of buttons, which, no matter how I resize them, should always be squares.

Any ideas?

This is what my grid looks like when resized differently:

Here it is perfectly squared, but if I make my window smaller...

...it looks like this:

That's the .ui:

<layout class="QGridLayout" name="gridLayout_5" rowstretch="0,0,0" columnstretch="0,0,0">
         <property name="sizeConstraint">
          <enum>QLayout::SetMinimumSize</enum>
         </property>
         <item row="2" column="1">
          <widget class="QPushButton" name="downButton_3">
           <property name="minimumSize">
            <size>
             <width>30</width>
             <height>30</height>
            </size>
           </property>
           <property name="maximumSize">
            <size>
             <width>50</width>
             <height>50</height>
            </size>
           </property>
           <property name="layoutDirection">
            <enum>Qt::LeftToRight</enum>
           </property>
           <property name="text">
            <string/>
           </property>
           <property name="icon">
            <iconset resource="grafics.qrc">
             <normaloff>:/grafics/grafics/pfeile/pfeil_unten.tga</normaloff>:/grafics/grafics/pfeile/pfeil_unten.tga</iconset>
           </property>
           <property name="iconSize">
            <size>
             <width>50</width>
             <height>50</height>
            </size>
           </property>
          </widget>
         </item>
         <item row="0" column="1">
          <widget class="QPushButton" name="upButton_3">
           <property name="minimumSize">
            <size>
             <width>30</width>
             <height>30</height>
            </size>
           </property>
           <property name="maximumSize">
            <size>
             <width>50</width>
             <height>50</height>
            </size>
           </property>
           <property name="sizeIncrement">
            <size>
             <width>0</width>
             <height>0</height>
            </size>
           </property>
           <property name="text">
            <string/>
           </property>
           <property name="icon">
            <iconset resource="grafics.qrc">
             <normaloff>:/grafics/grafics/pfeile/pfeil_oben.tga</normaloff>:/grafics/grafics/pfeile/pfeil_oben.tga</iconset>
           </property>
           <property name="iconSize">
            <size>
             <width>50</width>
             <height>50</height>
            </size>
           </property>
          </widget>
         </item>
         <item row="1" column="1">
          <widget class="QPushButton" name="waitButton_3">
           <property name="minimumSize">
            <size>
             <width>30</width>
             <height>30</height>
            </size>
           </property>
           <property name="maximumSize">
            <size>
             <width>50</width>
             <height>50</height>
            </size>
           </property>
           <property name="font">
            <font>
             <family>MS Shell Dlg 2</family>
             <pointsize>15</pointsize>
            </font>
           </property>
           <property name="contextMenuPolicy">
            <enum>Qt::DefaultContextMenu</enum>
           </property>
           <property name="text">
            <string>W</string>
           </property>
           <property name="icon">
            <iconset theme="&amp;#9664"/>
           </property>
          </widget>
         </item>
         <item row="1" column="0">
          <widget class="QPushButton" name="leftButton_3">
           <property name="minimumSize">
            <size>
             <width>30</width>
             <height>30</height>
            </size>
           </property>
           <property name="maximumSize">
            <size>
             <width>50</width>
             <height>50</height>
            </size>
           </property>
           <property name="text">
            <string/>
           </property>
           <property name="icon">
            <iconset resource="grafics.qrc">
             <normaloff>:/grafics/grafics/pfeile/pfeil_links.tga</normaloff>:/grafics/grafics/pfeile/pfeil_links.tga</iconset>
           </property>
           <property name="iconSize">
            <size>
             <width>50</width>
             <height>50</height>
            </size>
           </property>
          </widget>
         </item>
         <item row="0" column="2">
          <widget class="QPushButton" name="deleteButton_3">
           <property name="minimumSize">
            <size>
             <width>30</width>
             <height>30</height>
            </size>
           </property>
           <property name="maximumSize">
            <size>
             <width>50</width>
             <height>50</height>
            </size>
           </property>
           <property name="font">
            <font>
             <pointsize>15</pointsize>
            </font>
           </property>
           <property name="text">
            <string>&lt;</string>
           </property>
          </widget>
         </item>
         <item row="1" column="2">
          <widget class="QPushButton" name="rightButton_3">
           <property name="minimumSize">
            <size>
             <width>30</width>
             <height>30</height>
            </size>
           </property>
           <property name="maximumSize">
            <size>
             <width>50</width>
             <height>50</height>
            </size>
           </property>
           <property name="sizeIncrement">
            <size>
             <width>0</width>
             <height>0</height>
            </size>
           </property>
           <property name="text">
            <string/>
           </property>
           <property name="icon">
            <iconset resource="grafics.qrc">
             <normaloff>:/grafics/grafics/pfeile/pfeil_rechts.tga</normaloff>:/grafics/grafics/pfeile/pfeil_rechts.tga</iconset>
           </property>
           <property name="iconSize">
            <size>
             <width>50</width>
             <height>50</height>
            </size>
           </property>
          </widget>
         </item>
        </layout>

If you are using Qt Designer then you should generate a .ui file that is an XML format file, that is the content you must share. — eyllanesc, Dec 01 '19 at 19:50
@eyllanesc did you edit something? if so what did you change? — Cpt. Crazy, Dec 01 '19 at 20:46
You can see all the editions by clicking on the link at the bottom of your post that says "edited ..." — eyllanesc, Dec 01 '19 at 20:47
ah ok. thought you might have put a solution in the XML that i didnt see — Cpt. Crazy, Dec 01 '19 at 20:56

score 1 · Answer 1 · answered Dec 03 '19 at 08:20

Read about the Qt layouts https://doc.qt.io/qt-5/layout.html
It's a powerful way to have responsive UI and ensure your window will look good for many different sizes.

All Qt widgets have default behaviours about how to resize in the available space. You can see in your code (and in Qt Designer properties) that your buttons have min and max sizes, the layout will adapt your widget's size in this range when you resize your window, to make everything fit as much as possible.
So if your window is not squared, your content will not be squared, thanks to the top GridLayout you have.

About your question to have squared buttons, there is not straightforward property to do that, you have to code a little bit :

Squared button in Qt Designer

1 Answers1