Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Displaying a list



  • 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:

    untitled.png



  • 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.



  • @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?



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


Log in to reply