Display information on the fly
-
I tried to find a nice title for this but I couldn't, I think that it has to do about creating widgets on the fly but I'm not sure.
I have a JSON (not that one, it's really similar tho) https://picsum.photos/list, it's a list of items, each item has a few information and a download link.
I'm used to create web application, so in this case I would request the API, loop over the items and create an HTML to display each item.
I was wondering today, how can I create a display for each item dynamically and display the information?For example, what I need to display is: the author name, resolution, type and a radiobutton, when the user press a button it will send the selected item as a signal.
The reason I want to send as a signal is that I need the link so I can download the selected item.
-
hi @Mr-Gisa
this basically screams for a lisview with a custom delegate.Than you just populate the listview with the data from the json-file.
I would go into further details, but I'm not that proficient in his field. When I have to use a ListView I end up using a standart model/view or use the inferior "SetItemWidget" function :(
But others may be of more help here.
-
@Mr-Gisa
well I can point you to the right docu section at least :-)There's the Stardelegate Example that is actually pretty close to your current situation.
-
- create a
QStandardItemModel
- call
QStandardItemModel::insertColumns(0,3)
- Iterate over the results using
QJsonArray
- call
QStandardItemModel::insertRow
+QStandardItemModel::setData
to populate the model (you can save the link inQt::UserRole
) - create a
QTableView
and callsetModel
on it to assign your model
- create a
-
@Mr-Gisa
Hi you can disable the gridlines and change background and it it wont look cell like.
The http://doc.qt.io/qt-5/qtwidgets-itemviews-stardelegate-example.html
show a delegate example.
In your case you would use QStyle to paint the radio button and use CreateEditor
to create an action option button.
You should read this for the model/view part
http://doc.qt.io/qt-5/model-view-programming.htmlHow many items are we talking about ?
-
@Mr-Gisa
Ok luca will kill me for this but at such low number, you could use
SetItemWidget which allows a widget to be placed on a "row"
So you can use normal widgets and simply use a UI file in Designer
and then create instances of this class and place on the rows.
Note this is only good with few items and Desktop class pc.
The performance is bad with many items and scrolling on mobile devices.
The correct way is a Delegate. However its also a vbit involving.
This is other example where it draws a progress bar via a Delegate.
http://doc.qt.io/qt-5/qtnetwork-torrent-example.html
It really is the best way , however, i must confess i used setItemWidget a few times
as its so much easier and performance is not an issue in my use case. ;) -
@VRonin said in Display information on the fly:
Tu quoque, Brute, fili mi!
hehe yes. sorry. I guess back then his stepson Brutus didn't have any excuses but here
it might fit his use case as very few items. and no scrolling needed. -
DEATH TO setItemWidget!
#include <QApplication> #include <QStyledItemDelegate> #include <QStandardItemModel> #include <QSortFilterProxyModel> #include <QTreeView> #include <QHeaderView> #include <QPushButton> #include <QHBoxLayout> #include <QVBoxLayout> int main(int argc, char **argv) { QApplication app(argc, argv); QStandardItemModel model; model.insertColumns(0,3); model.insertRows(0,3); for(int i=0;i<3;++i){ model.setData(model.index(i,0),QStringLiteral("autor")); model.setData(model.index(i,1),QStringLiteral("resolution")); model.setData(model.index(i,2),QStringLiteral("type")); model.setData(model.index(i,0),Qt::Unchecked,Qt::CheckStateRole); model.item(i,0)->setFlags(model.flags(model.index(i,0)) | Qt::ItemIsUserCheckable); } QWidget mainWid; QTreeView* mainView = new QTreeView(&mainWid); const QColor backColor = mainWid.palette().background().color(); mainView->setStyleSheet(QStringLiteral("QTreeView{border: 0px;background-color:%1;} QTreeView::item:hover{background-color:%1;}").arg(backColor.name(QColor::HexRgb))); mainView->setModel(&model); mainView->setIndentation(0); mainView->setSelectionMode(QAbstractItemView::NoSelection); mainView->setSizePolicy(QSizePolicy::MinimumExpanding,QSizePolicy::Preferred); mainView->header()->setSectionResizeMode(QHeaderView::Stretch); mainView->header()->hide(); mainView->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff); mainView->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff); QVBoxLayout* mainLay = new QVBoxLayout(&mainWid); mainLay->addWidget(mainView); QHBoxLayout* buttonLay=new QHBoxLayout; buttonLay->addSpacerItem(new QSpacerItem(1,1,QSizePolicy::Expanding,QSizePolicy::Preferred)); buttonLay->addWidget(new QPushButton(QStringLiteral("select"),&mainWid)); mainLay->addLayout(buttonLay); //mutual exclusion. QObject::connect(&model,&QAbstractItemModel::dataChanged,[&model](const QModelIndex& idx,const QModelIndex&,const QVector<int>& roles){ #if QT_VERSION >= QT_VERSION_CHECK(5, 11, 0) if(!roles.contains(Qt::CheckStateRole) continue; #endif if(idx.column()==0 && idx.data(Qt::CheckStateRole)==Qt::Checked){ for(int i=0, maxRow =model.rowCount() ;i<maxRow;++i){ if(i==idx.row()) continue; model.setData(model.index(i,0),Qt::Unchecked,Qt::CheckStateRole); } } }); mainWid.show(); return app.exec(); }