Best practices for using QSplitter in pyqt5? Trying to add a movable separator to a project

Question

A UI that I'm trying to create looks roughly like this: Until now there's been no splitter, but now I want to put a movable splitter where the red line is and be able to drag it left or right.

So I used a QSplitter(using Qt Creator) and put it there ( where the red line is), but it doesn't work the way I want it; when I drag the splitter it doesn't 'slide' along with the mouse. Instead, it's like there are 3 options:

closing the menu side entirely ( and doing so badly; can't see the separator itself)
The 'normal' position (exactly as before dragging the separator)
Closing the content side entirely ( and doing that badly as well)

I'd love to provide more information but I don't really know what would be helpful. Please let me know what would be helpful.

Thanks.

UPDATE: The code @bfris added here inspired me to create a mockup playground and try a bunch of things. so I copied the content side and the menu side from my project to the playground, added a QSplitter and everything just worked great. But then I tried to do the same in my project - and I saw the same behavior I described above . So I played with my project a little more to investigate what could be the cause; I tried to leave the menu side (frame) empty - same behavior. Tried to leave the content side empty - and the QSplitter worked well(!). So I brought the content back into my project and tried to change its' horizontal size policy to 'ignored' - and that worked too, but the proportions were waaay off; The menu side was initially bigger than the content side. The interesting part is that at the playground I didn't have to change the size policy.

Any thoughts what might be the difference between the playground and the project? Or how to make the proportions right when horizontal size policy is 'ignored'?

The behaviour you describe probably indicates that you have set a minimum width on the contained widgets - so don't do that, if you want the widgets to be freely resizeable (or at least, choose smaller minimum values). And also consider setting the splitter's [childrenCollapsible property](https://doc.qt.io/qt-5/qsplitter.html#childrenCollapsible-prop) to false. — ekhumoro, Nov 30 '22 at 21:44
@ekhumoro I do use minimum width to some of the contained widgets; but when I remove the minimum width everything loses the way it looks. Got a suggestion how to control the initial width? Using geometry width is disabled since everything is in a container. — tagseman, Dec 01 '22 at 14:09
The whole point of using a splitter is to let the user decide. Use [QSplitter.setSizes](https://doc.qt.io/qt-6/qsplitter.html#setSizes) to set the initial widths, and/or save/restore the current values via [QSplitter.saveState](https://doc.qt.io/qt-6/qsplitter.html#saveState). — ekhumoro, Dec 01 '22 at 14:21
@ekhumoro I assume using minimum size for one of the inner components would also be a problem...? Would setMinimum size to 0 be OK? — tagseman, Dec 01 '22 at 15:19
It might be. If you don't set a minimum width, the default size-hint will be used instead. Just try experimenting a bit in Qt Designer until you find an acceptable compromise. Usually there's some smallest size beyond which a widget will no longer be usable. — ekhumoro, Dec 01 '22 at 19:10

score 0 · Answer 1 · answered Nov 30 '22 at 20:54

I've not seen a QSeparator. QSplitters work very nicely and smoothly.

This is an example I worked up i Qt Designer. qsplitter_example.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>800</width>
    <height>600</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <property name="styleSheet">
   <string notr="true">QWidget {
background-color: blue;
}

QLabel {
background-color: orange;
}</string>
  </property>
  <widget class="QWidget" name="centralwidget">
   <layout class="QVBoxLayout" name="verticalLayout">
    <item>
     <widget class="QLabel" name="label_3">
      <property name="sizePolicy">
       <sizepolicy hsizetype="Preferred" vsizetype="Fixed">
        <horstretch>0</horstretch>
        <verstretch>0</verstretch>
       </sizepolicy>
      </property>
      <property name="minimumSize">
       <size>
        <width>0</width>
        <height>100</height>
       </size>
      </property>
      <property name="font">
       <font>
        <family>Calibri</family>
        <pointsize>24</pointsize>
       </font>
      </property>
      <property name="text">
       <string>Headline</string>
      </property>
      <property name="alignment">
       <set>Qt::AlignCenter</set>
      </property>
     </widget>
    </item>
    <item>
     <widget class="QSplitter" name="splitter">
      <property name="styleSheet">
       <string notr="true"/>
      </property>
      <property name="orientation">
       <enum>Qt::Horizontal</enum>
      </property>
      <widget class="QLabel" name="label">
       <property name="font">
        <font>
         <family>Calibri</family>
         <pointsize>24</pointsize>
        </font>
       </property>
       <property name="text">
        <string>menu</string>
       </property>
       <property name="alignment">
        <set>Qt::AlignCenter</set>
       </property>
      </widget>
      <widget class="QLabel" name="label_2">
       <property name="font">
        <font>
         <family>Calibri</family>
         <pointsize>24</pointsize>
        </font>
       </property>
       <property name="text">
        <string>Content</string>
       </property>
       <property name="alignment">
        <set>Qt::AlignCenter</set>
       </property>
      </widget>
     </widget>
    </item>
   </layout>
  </widget>
  <widget class="QMenuBar" name="menubar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>800</width>
     <height>26</height>
    </rect>
   </property>
  </widget>
  <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <resources/>
 <connections/>
</ui>

Thanks! I did mean QSplitter, and that's what I used. I have to say, the example you gave here inspired me to create a simplified mockup to try and get to the bottom of this. — tagseman, Dec 02 '22 at 17:28

score 0 · Answer 2 · answered Dec 08 '22 at 08:20

After much trial and error (thanks to @bfris who inspired me to create a mockup playground) I have found what the issue was.

Quite annoyingly, it appears that I have misplaced the content (of, well, the content frame) into the wrong frame!
Now That I moved it back to the correct frame, all I needed was to set the content frame's horizontal size policy to 'ignored'.

Best practices for using QSplitter in pyqt5? Trying to add a movable separator to a project

2 Answers2