how to center a middle widget and expand its cell

Viewed 75

In Qt designer, how do i center a middle widget in a vertical/horizontal/grid layout and expand its cell at the same time, what i want to get is something like this:

enter image description here

what i get:

enter image description here

2 Answers

One possible solution is to place the middle QPushButton in a QWidget through a layout, and then place that QWidget in the second column of the QHBoxLayout:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>Form</class>
 <widget class="QWidget" name="Form">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>400</width>
    <height>300</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Form</string>
  </property>
  <layout class="QHBoxLayout" name="horizontalLayout_2">
   <item>
    <widget class="QPushButton" name="pushButton">
     <property name="text">
      <string>PushButton</string>
     </property>
    </widget>
   </item>
   <item>
    <widget class="QWidget" name="widget" native="true">
     <property name="sizePolicy">
      <sizepolicy hsizetype="Preferred" vsizetype="Fixed">
       <horstretch>0</horstretch>
       <verstretch>0</verstretch>
      </sizepolicy>
     </property>
     <layout class="QHBoxLayout" name="horizontalLayout">
      <property name="leftMargin">
       <number>0</number>
      </property>
      <property name="topMargin">
       <number>0</number>
      </property>
      <property name="rightMargin">
       <number>0</number>
      </property>
      <property name="bottomMargin">
       <number>0</number>
      </property>
      <item>
       <widget class="QPushButton" name="pushButton_2">
        <property name="sizePolicy">
         <sizepolicy hsizetype="Maximum" vsizetype="Fixed">
          <horstretch>0</horstretch>
          <verstretch>0</verstretch>
         </sizepolicy>
        </property>
        <property name="text">
         <string>PushButton</string>
        </property>
       </widget>
      </item>
     </layout>
    </widget>
   </item>
   <item>
    <widget class="QPushButton" name="pushButton_3">
     <property name="text">
      <string>PushButton</string>
     </property>
    </widget>
   </item>
  </layout>
 </widget>
 <resources/>
 <connections/>
</ui>

Output:

enter image description here

You're gonna need to add a horizontal spacer. And then for the spacer you can add properties. Whether it should be fixed or expanding.

enter image description here

So first select and add a horizontal spacer, and then when you select the horizontal spacer, in the properties widget you'll be able to set properties to it:

enter image description here

The way the spacer will be placed in-between two widgets, is by first dragging the spacer and placing it in between the widgets, selecting all of them and then right-click and group horizontally. This will put your widgets and the spacer in a horizontal layout:

enter image description here

If you want to do it in the code manually, look into QSpacerItem.

Related