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.

    0_1531115638534_e5754f59-5648-41f2-921f-c52c85cc13a7-image.png

    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.



  • Hi, thank you for your answer. You might be right, but I have no idea how to do something like that. Let's see if someone helps me with that.



  • @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 in Qt::UserRole)
    • create a QTableView and call setModel on it to assign your model


  • @VRonin The approach you said is using a table, I don't want it to be like a table (in appearance). It would look something like this:

    0_1531133455784_939b249c-159b-4719-9780-a7f9e541517d-image.png



  • Then follow @J-Hilk 's suggestion. it's executed basically in the same way as a table but you have just 1 column and the rest goes in different roles



  • I'm still confused about this, because the example he sent is about a delegate that is going to be in a column.
    I still don't know how I'm going to show a radio and tree label like in the image I sent.
    I would really appreciate an example.



  • Anyone to help me with an example about this?


  • Qt Champions 2017

    @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.html

    How many items are we talking about ?



  • A few, 10~15 max. Even less. I don't think it's going to be more than 15 tho.


  • Qt Champions 2017

    @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. ;)



  • @mrjj Tu quoque, Brute, fili mi!



  • @VRonin That was too long. He only had time for: Et tu, Brute.


  • Qt Champions 2017

    @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();
    }
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.