Displaying a list

Circuits

How do I go about displaying a list of items defined in the back-end in the front-end? Can someone show me an example on how to do this. I think I have an idea of how to do it. I was thinking about using enum like so:

enum FRUIT_TYPE
{
  APPLE_FRUIT
  PEAR_FRUIT
  ORANGE_FRUIT
}

static QStringList fruitType()
{
  return QStringList() << tr("Apple")
                       <<tr("Pear")
                       <<tr("Orange")
}

this will be displayed on the front end with Menu QML type or perhaps it just a ListView. The only problem I see is that I also want each fruit to have a picture associated with it, not just a string. I want the user to be able to click the picture with the string underneath of it in order to make their selection. So perhaps I need an Q_OBJECT instead of an enum? Perhaps I could jam this Enum into an object? What would be best to send to the front end for parsing?

Here is a picture to give you a rough idea of what I am trying to do:

rrlopez

Hi @Circuits, you can use ListModel to create your model: https://doc.qt.io/qt-5/qml-qtqml-models-listmodel.html. If you want to do it from C++ then you will have to create an implementation of either QQmlPropertyMap or QAbstractListModel depending on what you want to do.
On both implementations you can use a ListModel to display the items.

Circuits

@rrlopez Okay this is sort of where my head went as well. I think I am going to (for now) use ListModel in congruence with GridView because there is a chance I will need multiple rows and columns; for instance, I might have 10 fruit all displayed on one page. Then in the back end I will create two functions:

static QStringList fruitType()
{
  return QStringList() << tr("Apple")
                       <<tr("Pear")
                       <<tr("Orange")
}

static QStringList fruitTypeImages()
{
  return QStringList() << tr("qrc:/Images/apple.png")
                       <<tr("qrc:/Images/pear.png"
                       <<tr("qrc:/Images/orange.png")
}

So on the front end the delegate too GridView can be one of these two lists and then I will simple create a function which will associate the other list's elements with the delegate's elements via the delegates current index. Then I will simple use a Button who's image: property is the fruitTypeImages() currently indexed string (url location) and a Text property which will be the fruitType() functions currently indexed string (name of fruit). These two types (Text and Button) will be anchored together.

At some later point I will go back and make use of QAbstractListModel but for now I already have a model and it's rather simple enough for me to add another property too it for the url's for the images.

EDIT: After reading on ListView I am confused why I would even need GridView is this just the same thing as a ListView but provides more functionality?

rrlopez

@Circuits yeah, GridView provides more functionality on how items are displayed.