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'?

Answer 1

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>

Answer 2

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

1. Quite annoyingly, it appears that I have misplaced the content (of, well, the content frame) into the wrong frame!
2. 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'.