How to create QtQuick widgets using a python "for" loop

cheesecake_factory

I've been trying to develop an application similar to a browser (offline, shows scraped results of specific websites). Does the app need to display the corresponding results when the user searches for something how do I do this? I was thinking of making it so that a python loop creates widgets for each item in the list but I do not know how to set up the signal and slot for it.

sierdzio

From your description it seems like you need a QListView with a custom QAbstractListModel attached to it. And to add search & filter functionality, you may need to take a look at QSortFilterProxyModel.

I don't think generating widgets in a loop will be necessary here. But just in case you need it - yes it's possible.

cheesecake_factory

Is it possible for QML in QtQuick? I think that solution is for QtWidgets

sierdzio

@cheesecake_factory said in How to create QtQuick widgets using a python "for" loop:

Is it possible for QML in QtQuick? I think that solution is for QtWidgets

Yes, just use ListView instead of QListView. The rest (models) stay the same.

cheesecake_factory

Thank you very much for the help. I just have one more question: Can you set signals and events for the items within that list? So just like the urls appearing after a google search would I be able to mae it so that it has an underline when I hover and change colors (signals for each button too)?

sierdzio

@cheesecake_factory said in How to create QtQuick widgets using a python "for" loop:

Thank you very much for the help. I just have one more question: Can you set signals and events for the items within that list? So just like the urls appearing after a google search would I be able to mae it so that it has an underline when I hover and change colors (signals for each button too)?

Yes, of course you have full control over the items (the visual part is called a Delegate), and since you will have a subclass of QAbstractListModel, you will also have full control over the data which Delegates display. Se a general description of the system here: https://doc.qt.io/qt-5/qtquick-modelviewsdata-modelview.html#view-delegates

cheesecake_factory

I see. Thanks very much for the help again. Just out of curiosity, how can you create widgets through a loop?

sierdzio

@cheesecake_factory said in How to create QtQuick widgets using a python "for" loop:

I see. Thanks very much for the help again. Just out of curiosity, how can you create widgets through a loop?

You mean QWidget?

for (int i = 0; i < 5; ++i) {
  new QWidget(this);
}

qDebug() << "Widgets:" << children();

But that would not look good at all, of course. Better to use some QLayout to position them nicely.

If you mean QML, then you should be saying "components" not "widgets". There are many ways to do it, for example using a repeater:

Column {
  Repeater {
    model: 5
    Text {
      text: "Oh hi! " + index
    }
  }
}

Or you can use ListView with a simple ListModel. Or use JS: https://doc.qt.io/qt-5/qtqml-javascript-dynamicobjectcreation.html

cheesecake_factory

@sierdzio I meant how to set up the signal and slot and thanks for pointing out my mistakes. "Repeater" could be used in this case but I want to send data to the QML file. For example, say I have a dictionary of an image link and its respective site link I want the app to display the image. How can I set it up like that?

sierdzio

@cheesecake_factory said in How to create QtQuick widgets using a python "for" loop:

@sierdzio I meant how to set up the signal and slot and thanks for pointing out my mistakes. "Repeater" could be used in this case but I want to send data to the QML file. For example, say I have a dictionary of an image link and its respective site link I want the app to display the image. How can I set it up like that?

I don't know Python so I can't help on that front. But in QML, if you have some model or QObject attached as context root property to the engine, it can be quite easy.

Column {
  Repeater {
    model: yourContextProperty.link.length
    Row {
      Text {
        text: "Oh hi! " + yourContextProperty.link[index]
      }
      Image {
        source: yourContextProperty.image[index]
      }
    }
  }
}

Where yourContextProperty is a QObject like:

class MyObject : public QObject
{
  Q_OBJECT

  Q_PROPERTY(QStringList link READ link NOTIFY linkChanged)
  Q_PROPERTY(QStringList image READ image NOTIFY imageChanged)

  public:
    // blah blah, the usual stuff

  QStringList link() const
  {
    return { "aaa.com", "bbb.com" };
  }

  QStringList image() const;
  {
    return { ":/imageA,png", ":/imageB.png" };
  }

  signals:
  void linkChanged() const;
  void imageChanged() const;
};

And you add this object to engine like this:

// main.cpp

QQmlEngine engine;
auto myObject = new MyObject(&engine);
engine.rootContext()->setContextProperty("yourContextProperty", myObject);