Responsive layout with QFrame

Tyskie

Hello, I would like to achieve some kind of responsive design using a QLayout for my custom widgets.
I would like my widgets to be placed like it would be done in HTML with inline elements in a block element for example my widget would be <span> elements, encapsulated in a <div> element. So when I resize my windows they got aligned or expand horizontally and when item is removed they all move automatically to fill the space missing (see picture).

I tried to check it over the interweb, but couldn't find anything similar but H and V, and grid Layout which would be hard to maintain.

Anyone would have some hints to start please ?

thanks

SGaist

Hi,

Based on you image and description, a QListView/ custom QStyledItemDelegate combo is likely what you are looking for.

Tyskie

Will the QListView or the Delegate be able to work with defined width elements and move them not in a row manner?
I would have to have the following (if I increase window width)

mrjj

Hi
Well it has icon mode
http://doc.qt.io/qt-5/qlistview.html#ViewMode-enum
and does contract as you descipe but as far as i recall it was not super happy if
each item is not square. Made it space the items. Maybe it just need tweaking.

Tyskie

@mrjj said in Responsive layout with QFrame:

http://doc.qt.io/qt-5/qlistview.html#ViewMode-enum

Alright thanks ! I am gonna give it a try.

mrjj

@Tyskie
Hi
You can use
setGridSize(QSize(185,185));
to define the layout if needed. ( also in Designer)

Tyskie

I got the QListWidget working, but I am not quite sure how to use the QStyledItemDelegate.
I suppose I have to override the paint method, but I have no idea how to tell it to 'redraw' my custom QWidgets is it even possible?
Would you be able to guide me ?

When the app starts, all is good they are shown as I want. But when I resize here is what I have
(on left I resized bigger and on right I reduced width)

mrjj

@Tyskie
Hi
what custom widget ?
did you use setItemWidget on the items ?

When using delegate, its as replacement for setItemWidget as it can get memory hungry and slow
with many items.
So the idea is to draw the widgets using calls to QStyle and
only when in edit mode for a cell, you create widgets ( In createEditor of the delegate)
That way it dont have to scroll around many real Widgets. All that is not being edited are just drawn.
see here for sample
http://doc.qt.io/qt-5/qtwidgets-itemviews-stardelegate-example.html

However, if you are only having like 50 items, setItemWidget works fine on desktop pc.

update:
use
setResizeMode(QListView::Adjust) to make it use all space.

Tyskie

Oh ! setResizeMode(QListView::Adjust) did the trick thank you so much :D
I actually don't need a QStyledItemDelegate with that (explaining below regarding you comment updates) !

About your questions, my custom widget is simply a QFrame with a QLabel and QButton in QHBoxLayout.
And yes I use addItem followed by setItemWidget with a QListWidgetItem.

Regarding performances, I think I will have near 50 items max, on the other hand those are using thread for the countdown, and as I limit the amount of threads, then yes, as you said, should not be a problem.

I am not yet very familiar with the framework, I have some trouble understanding how the delegate can draw my widget :D - need to dig that out. Thanks again.

mrjj

@Tyskie
Hi
Well then setItemWidget should work just fine.

Here is a delegate for combobox
http://programmingexamples.net/wiki/Qt/Delegates/ComboBoxDelegate
Notice the paint. it uses QApplication::style()->drawControl to draw the item
There are many things, style()->drawControl and friends can draw. including all QWidgets
like QPushButton.

void ComboBoxDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
  QStyleOptionViewItemV4 myOption = option;
  QString text = Items[index.row()].c_str();
 
  myOption.text = text;
 
  QApplication::style()->drawControl(QStyle::CE_ItemViewItem, &myOption, painter);
}

However, in Editmode, it uses a real combobox for selections.
(QWidget *ComboBoxDelegate::createEditor)

Its all explained here
http://doc.qt.io/qt-5/model-view-programming.html

However, if you use setItemWidget , i see no need for a delegate.

Tyskie

Well actually if one item gets removed, the others does not fill the place it left. More over when I remove an item and the resize the window, I got segment fault. I guess I am not yet done with ! hehe :)

Thank you for the delegate example I will check it out and learn from it.

mrjj

@Tyskie
Hi
How do you remove the item ?
It should not crash. Also notice that Qt has a owner system that delete Widgets when parent is deleted
so its important not to delete the children manually.
I assume you simply remove the ListWidgetItem ?

http://doc.qt.io/qt-5/objecttrees.html

Tyskie

Hi,
even worse :D I have a button.clicked.connect which I connected to QFrame close().
so the button close the entire QFrame when X is pressed.

Tyskie

Hi, @mrjj how would delete the widget if not by deleting itself (the widget directly - not ListWidgetItem)?

mrjj

@Tyskie
Hi and welcome back
You mean take the widget back from the ListWidgetItem and delete it ?
(but leave ListWidgetItem alone ) ?

Tyskie

@mrjj thx, didn't had much time to get back to it yet.
I meant to remove the whole 'item' from the list with ListWidgetItem and the widget/layout in it
I have seem some people using takeItem/take and some with getting the model and removing item from it with removeRow, any best practice for that use case maybe?

mrjj

@Tyskie
there is
http://doc.qt.io/qt-5/qlistwidget.html#removeItemWidget
to remove whole widget ( and all it owns)
or
http://doc.qt.io/qt-5/qlistwidget.html#takeItem

im not sure if u want both gone. (item and widget) or just widget

Tyskie

Oh right I missed the removeItemWidget - my bad, thanks again !

Tyskie

mhm I start to think that QListWidget/View is not what I am looking for :D
It's been really hard to handle the clicked.connect of my button in the widget that is associated with the QListWidgetItem.
I am for example unable to find the QListWidgetItem which has the widget button in it that I am clicking on. I can surely click on the text to make it the selected QListWidgetItem and then click the button (having the delete slot method removing the current selected item) but that not really convenient.

Tyskie

OK I gave up too early - I finally succeed to make it work :D thanks a lot @mrjj