ScrollArea intervers with expand policy

buhtz

I'm not sure if it is even possible because I'm using a ScrollArea here.

This picture illustrate the problem. It is a dialog with a scrollarea in it. The area has a QWidget, using a gridlayout (3 columns) with radiobuttons.

I want to expand the whole dialog on its horizontal axis (the width) until all content is visible. Like this:

I don't want to a horizontal scrollbar.

Is it possible with the scrollarea? It seems to me the area refuse to expand (no matter which policy I set) because it is scrollable. But I assume I do set the expand policy to the wrong components (scrollarea, its inside widget, the layout?) or at the wrong time.

ChrisW67

@buhtz If the scroll area is not expanding to fill the entire space in the client area of the "Language selection" dialog then the layout of that dialog is either not set, or the scroll area is not in it.

Could I suggest that a QListWidget (or QListView and model) may be a better solution for this list.

mpergand

@buhtz
You can resize the main window to the scrollarea's widget size.

auto scr=new QScrollArea;
auto w=new QWidget;
auto grid=new QGridLayout;
for(int i=0;i<3;i++)
	{
	grid->addWidget(new QPushButton("AAAAAAAAAAAAAAAAAAAAAAAAAAAA"),0,i);
	grid->addWidget(new QPushButton("AAAAAAAAAAAAAAAAAAAAAAAAAAAA"),1,i);
	grid->addWidget(new QPushButton("AAAAAAAAAAAAAAAAAAAAAAAAAAAA"),2,i);
	grid->addWidget(new QPushButton("AAAAAAAAAAAAAAAAAAAAAAAAAAAA"),3,i);
	grid->addWidget(new QPushButton("AAAAAAAAAAAAAAAAAAAAAAAAAAAA"),4,i);
	grid->addWidget(new QPushButton("AAAAAAAAAAAAAAAAAAAAAAAAAAAA"),5,i);
	}

w->setLayout(grid);
scr->setWidget(w);
scr->show();
QSize size=scr->widget()->size();
scr->resize(size.width()+20,200);

buhtz

Thanks for your reply. My apologize for not offering an MWE. It was late yesterday.

@ChrisW67 said in ScrollArea intervers with expand policy:

Could I suggest that a QListWidget (or QListView and model) may be a better solution for this list.
Might be technical better. But I want to present my users how many languages I do support. ;) The dialog need to be a bit "boom & bling bling". ;)

This is the result of my MWE, still having the problem that the widget/dialog/scrollarea is not horizontally expanded.

This is the MWE in Python.

#!/usr/bin/env python3
import sys
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *

class LanguageDialog(QDialog):
    def __init__(self):
        super().__init__()

        # Language widget
        wdg_lang = self._language_widget()

        # Scroll area
        scroll = QScrollArea(self)
        # scroll.setWidgetResizable(True)
        # scroll.setFrameStyle(QFrame.NoFrame)
        scroll.setVerticalScrollBarPolicy(Qt.ScrollBarAsNeeded)
        scroll.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)

        # Here I'm not sure what to do.
        scroll.setSizePolicy(QSizePolicy.Fixed, QSizePolicy.Fixed)

        scroll.setWidget(wdg_lang)

        # Button "Apply"
        button = QDialogButtonBox(QDialogButtonBox.Apply)
        button.clicked.connect(self.accept)

        # Dialog layout
        layout = QVBoxLayout(self)
        layout.addWidget(scroll)
        layout.addWidget(button)

    def _language_widget(self):
        grid = QGridLayout()
        wdg = QWidget(self)
        wdg.setLayout(grid)

        for col in range(1, 4):
            for row in range(1, 24):

                r = QRadioButton(f'{col} x {row} | Lorem ipsum dolor sit amet', self)
                r.toggled.connect(self.slot_radio)
                r.mydata = (col, row)

                grid.addWidget(r, row, col)

        # ???
        # wdg.setSizePolicy(QSizePolicy.Expanding, QSizePolicy.Expanding)

        return wdg

    def slot_radio(self, val):
        btn = self.sender()
        if btn.isChecked():
            print(f'{btn.mydata=}')


class Window(QMainWindow):
    def __init__(self, parent=None):
        super().__init__(parent)

    def showEvent(self, e):
        dlg = LanguageDialog()
        dlg.exec()


if __name__ == "__main__":
    app = QApplication(sys.argv)
    win = Window()
    win.show()
    sys.exit(app.exec())

buhtz

X-Post

mpergand

@buhtz
I already gave you the solution in my previous post.
Looking at your code, in the showEvent in LanguageDialog, you can set the minimum width of the scrollArea to the width of languageWdget.

buhtz

@mpergand said in ScrollArea intervers with expand policy:

Looking at your code, in the showEvent in LanguageDialog, you can set the minimum width of the scrollArea to the width of languageWdget.

You mean this line?

scr->resize(size.width()+20,200);

But where comes the 20 and 200 from? Just guessing? I assume the dialog will behave different on different screen resolutions and DPIs. Isn't there a solution without explicit numbers?

mpergand

@buhtz said in ScrollArea intervers with expand policy:

Isn't there a solution without explicit numbers?

You can get the width of the scrollbar from QStyle:
https://forum.qt.io/topic/333/how-to-get-width-and-height-of-qscrollbars-arrow-widgets
it is not worth the trouble IMA
The best user experience is to save the geometry of the dialog the user set and restore it in dialog show .

buhtz

@mpergand said in ScrollArea intervers with expand policy:

You can get the width of the scrollbar from QStyle:
https://forum.qt.io/topic/333/how-to-get-width-and-height-of-qscrollbars-arrow-widgets

That doesn't answer where your 20 and 200 comes from.
The 20 is the scrollbar width?
And what is the 200? If it is the height: I don't want to modify the height.
And I also don't want to calculate the width. The width is given by the content of the widget and its childs in the scrollarea.

And what I wonder about:

scroll.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)

I deactivated that horizontal scrollbar. So the area should "know itself" that it should expand to its full width.

mpergand

@buhtz said in ScrollArea intervers with expand policy:

I deactivated that horizontal scrollbar. So the area should "know itself" that it should expand to its full width.

It doesn't work like that, the magic function you're looking for doesn't exist.

buhtz

I might have found a solution. Would be glad about a review from you more experienced folks.

https://stackoverflow.com/a/76738806/4865723

mpergand

@buhtz
That's what i said:

Looking at your code, in the showEvent in LanguageDialog, you can set the minimum width of the scrollArea to the width of languageWdget.

and yes i missed this easy way:
scrollbar_width = self._scroll.verticalScrollBar().sizeHint().width()

I'm not sure, sizeHint() is relevant here.

def _calculate_scroll_area_width(self):
    widget_width =  self._scroll.widget().sizeHint().width()
    scrollbar_width = self._scroll.verticalScrollBar().sizeHint().width()

    return widget_width + scrollbar_width

def showEvent(self, e):
    super().showEvent(e)
    self._scroll.setMinimumWidth(self._calculate_scroll_area_width())

I know nothing about python, but it looks OK to me.

buhtz

Now I have a new problem when combining this expand-solution with centering the dialog to the screen.

mpergand

@buhtz
maybe to call in sequence:

show
move
exec

ChrisW67

@buhtz said in ScrollArea intervers with expand policy:

@ChrisW67 said in ScrollArea intervers with expand policy:
Could I suggest that a QListWidget (or QListView and model) may be a better solution for this list.

Might be technical better. But I want to present my users how many languages I do support. ;) The dialog need to be a bit "boom & bling bling". ;)

This is the sort of thing I had in mind. It resizes itself to fit as much space as is available, show as many entries as possible, and does not have the child resizing its parent (i.e. the tail wagging the dog).

#include <QApplication>
#include <QWidget>
#include <QLabel>
#include <QListWidget>
#include <QListWidgetItem>
#include <QVBoxLayout>

int main(int argc, char **argv) {
        QApplication app(argc, argv);

        QWidget widget;
        QListWidget *list = new QListWidget(&widget);
        list->setWrapping(true);
        list->setGridSize(QSize(100, 20));
        list->setFlow(QListView::LeftToRight);
        list->setResizeMode(QListView::Adjust);
        for (int i = 0; i< 52; ++i) {
                QListWidgetItem *item = new QListWidgetItem(QString("Language %1").arg(i), list);
                item->setFlags(item->flags() | Qt::ItemIsUserCheckable);
                item->setCheckState(Qt::Unchecked);
        }

        QLabel *label = new QLabel("Resize me", &widget);

        QVBoxLayout *layout = new QVBoxLayout(&widget);
        layout->addWidget(list);
        layout->addWidget(label);

        widget.show();
        return app.exec();
}

buhtz

Great. Thanks in advance. I wasn't aware that the listview can have mutliple columns.

buhtz

Based on your example I'm not sure how you realized the multi columns. I thought it was setWrapping(True) and setGridSize(). But it does not work in my example where I try to create a 2 columns with 2 rows.

#!/usr/bin/env python3
import sys
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *


class CenteredDialog(QDialog):
    def __init__(self):
        super().__init__()

        wdg = QListWidget(self)
        wdg.setWrapping(True)
        wdg.setResizeMode(QListView.Adjust)
        wdg.setFlow(QListView.TopToBottom)
        wdg.setGridSize(QSize(2, 2))
        for idx in range(1, 3):
            wdg.addItem(f'item {idx}')

        # Button "Apply"
        button = QDialogButtonBox(QDialogButtonBox.Apply)
        button.clicked.connect(self.accept)

        # Dialog layout
        layout = QVBoxLayout(self)
        layout.addWidget(wdg)
        layout.addWidget(button)


if __name__ == "__main__":
    app = QApplication(sys.argv)
    dlg = CenteredDialog()
    dlg.show()
    sys.exit(app.exec())

ChrisW67

@buhtz The grid size is a QSize in pixels x and y, not a number of rows and columns. Items will align on this notional grid when rendered. You can leave it out and the wrapping will be compact.