Search code examples
pythonpyside2

How to fill color to rest of the space left on QVBoxLayout

I'm trying to make a side panel with pyqt. I'm able to make nice looking buttons but not able to fill the rest of the space with the same color.

My goal is to add the same blue color to space under the buttons, all the way to the bottom. Now my buttons are inside of a box layout which is inside of a widget (just to be able to set the style) which is inside of a grid cell which is inside of a widget.

I tried to add one more widget to the box layout, but it is not stretching to fill the space. I can set minimum height, but then if the window is resized, the blue area won't resize.

import sys
import PySide2.QtWidgets as qt 
from PySide2 import QtCore, QtGui
import os

class main_page:
    def create(self):

        # Create main window
        main_window = qt.QMainWindow()

        # Set some parameters for main window
        main_window.setGeometry(50,50,700,400)
        main_window.setWindowTitle("Here will be name of the program")

        # Create central widget that will contain layout to contain widgets. Eh...
        central_widget = qt.QWidget()
        central_widget.setStyleSheet("background: white;")

        # Add central widget to main window
        main_window.setCentralWidget(central_widget)

        # Create main grid layout that will organize everything
        main_grid = qt.QGridLayout(central_widget)

        main_grid.setSpacing(0)
        main_grid.setMargin(0)

        # Create widget that will contain layout and now we can set style for the widget.

        widget_that_would_not_be_needed_if_qt_would_not_be_so_stupid = qt.QWidget()

        widget_that_would_not_be_needed_if_qt_would_not_be_so_stupid.setStyleSheet(
            '''
            QPushButton {
                background: #FF005AA1;
                color: white;
                text-align: center;
                border: none;
                font-weight: 500;
                font-size: 15px;
                height: 48px;
                width: 120px;
            }
            QPushButton:hover {
               background-color: #FF014a82;
            }
            QPushButton:checked {
            background: #FF01508c;
            }
            QPushButton:pressed {
                color: #FF005AA1;
                background: white;
            }
            ''')

        # On left side we will have some (or at least one) button
        left_side_buttons = qt.QVBoxLayout(widget_that_would_not_be_needed_if_qt_would_not_be_so_stupid)

        left_side_buttons.setSpacing(0)
        left_side_buttons.setMargin(0)

        # And add it to main box the left most cell
        main_grid.addWidget(widget_that_would_not_be_needed_if_qt_would_not_be_so_stupid, 0, 0, alignment = QtCore.Qt.AlignTop)

        main_grid.setRowStretch(0,1)

        # Column 0 must not stretch
        main_grid.setColumnStretch(0,0)

        # Column 1 must stretch
        main_grid.setColumnStretch(1,1)

        # Add widgets to container
        left_side_buttons.addWidget(qt.QPushButton("First button"))
        left_side_buttons.addWidget(qt.QPushButton("Second button"))

        # Add separator line
        line = qt.QFrame()
        line.setFrameShape(qt.QFrame.HLine)
        line.setFrameShadow(qt.QFrame.Sunken)

        left_side_buttons.addWidget(line)

        # Add color for rest of the space
        color_filler = qt.QWidget()

        # I can use this to hack to make colored area bigger but it won't stretch
        color_filler.setMinimumHeight(100)

        left_side_buttons.addWidget(color_filler)

        main_grid.addWidget(qt.QListView(), 0, 1)

        main_window.show()

        # Add list view to right side
        main_grid.addWidget(qt.QListView(), 0, 1)

        main_window.show()

        return main_window


def main():

    app = qt.QApplication(sys.argv)
    my_main_page = main_page().create()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()

Here's what I get and what I want: Imgur

Solution

  • Probably the easiest way to get what you want, is to do the following

    1. Add QObject { background: #FF005AA1; } to the style sheet of widget_that_would_not_be_needed_if_qt_would_not_be_so_stupid.

    2. Remove the alignment argument when you add widget_that_would_not_be_needed_if_qt_would_not_be_so_stupid to main_grid (or use alignment = QtCore.Qt.AlignJustify),

    3. Replace color_filler with a stretchable space at the bottom of left_side_buttons (a stretchable space can be added via left_side_buttons.addStretch()).

    Screenshot:

    Screenshot