Resizable layouts/frames in Qt, per widget by the user

Question

I use QGridLayout very often, and there's a requirement I don't know how to or if I can achieve with this kind of layouts.

My question: Imagine I have two normal widgets (derived from QWidget) on the left and right (on something like QHBoxLayout or QGridLayout), and I would like to have the line separating them movable by the user. Is that possible?

More information: To give an example, imagine the default Windows registry editor. You have the part on the left, where there are keys and paths, and on the right, where there are values to be edited.

I would like to emphasize that I'm not asking for an explorer view. What I have basically is a plot widget on the right, and a QTableView widget on the left, and I would like the user to be able to conveniently scale with his mouse, which widget should be horizontally bigger.

Is there some kind of Layout that is scalable by mouse?

Please ask for more information of you require it.

Answer 1

I think you should use a QSplitter.

According to the documentation:

A splitter lets the user control the size of child widgets by dragging the boundary between the children. Any number of widgets may be controlled by a single splitter.

For example, using Qt Creator, if we have two QGridLayout with a QPushButton on each one, we can select both QGridLayout and use the Lay Out Horizontally in Splitter option.

After that, we could move the boundary between them to control the size of child widgets:

I made an example. Here you have the code for the ui file:

<?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>435</width>
    <height>105</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Form</string>
  </property>
  <widget class="QSplitter" name="splitter">
   <property name="geometry">
    <rect>
     <x>9</x>
     <y>10</y>
     <width>411</width>
     <height>71</height>
    </rect>
   </property>
   <property name="orientation">
    <enum>Qt::Horizontal</enum>
   </property>
   <widget class="QWidget" name="gridLayoutWidget">
    <layout class="QGridLayout" name="gridLayout">
     <item row="0" column="0">
      <widget class="QPushButton" name="pushButton">
       <property name="text">
        <string>PushButton</string>
       </property>
      </widget>
     </item>
    </layout>
   </widget>
   <widget class="QWidget" name="gridLayoutWidget_2">
    <layout class="QGridLayout" name="gridLayout_2">
     <item row="0" column="0">
      <widget class="QPushButton" name="pushButton_2">
       <property name="text">
        <string>PushButton</string>
       </property>
      </widget>
     </item>
    </layout>
   </widget>
  </widget>
 </widget>
 <resources/>
 <connections/>
</ui>

Answer 2

The splitters are available on the top bar for horizontally and vertically.

From this bar:

Select the objects you want to split and then apply the splitter layout. A quick tryout in the form view lets you check the operation.

I have three objects horizontally connected using Splitters in two separate rows. I select the two horizontal Splitters from the Object Inspector view and apply the vertical Splitter:

This gives me 6 panes I can adjust at run time:

Note the top right pane has been collapsed to move it right out of view.