ListView with dynamic delegates

XDePedro

I want to implement a ListView for a quite big set of data and I would like the user to be able to configure the content of the list by itself.

So imagine you have 20/30 different fields (some can be numbers, some can be text and some any other type of resource as images, checks, etc.) for an entity and you have to create a list (ListView) with them....how do you implement a configurable list in QML?

Thanks in advance.

ODБOï

Hi @XDePedro ,
Im not sure i understand :

so your list will directly contain (show) that 20/30 fields ?
or your fields will just modify the list content ?

What is the data in your model ?

XDePedro

The data will always be the same and I am talking of a read-only view, I mean the user will no be able to modify data from this view.

Imagine it's the list of costumers of a on-line shop and you have the following fields: name, surname, address, age, date of birth, gender, purchased items, etc. And you want to give your users the ability to decide which fields has to be displayed, for instance for one user the gender is not important and he/she wants to remove the gender from the list of fields, or another one is not interested in age of the costumer, etc.

So I need to dynamically change the Delegate for the list row depending on the configuration of every User. What's the best one to implement this???

ODБOï

This post is deleted!

XDePedro

why is the post deleted??

Diracsbracket

@XDePedro
Why don't you just create the complete delegate with all the info and then hide the fields depending on the user's prefs?

In the example below, the delegate consists of a Text and a Rectangle. Depending on the user pref (here emulated by a variable whose value is toggled by a mouse click, but which should be part of the model in practice), the Rectangle will be hidden or shown:

    ListView {
        id: list
        height: 600
        width: parent.width

        model : 3 //or some model

        delegate: Column {
            property bool showRectPref: false //should come from model in reality
            Text {
                text: "Click me " + index
                height: 40
                MouseArea {
                    anchors.fill: parent
                    onClicked : showRectPref = !showRectPref
                }
            }
            Rectangle {
                id: rect
                visible: showRectPref
                color: index == 0 ? "black" : (index==1 ? "red" : "blue")
                height: 100
                width: list.width
            }
        }
    }

In the above example, the delegate's height is correctly resized when rect becomes invisible.

XDePedro

Hi @Diracsbracket,

thank you very much for your answer. I have already though about that but in fact the costumization I want to achive is not just displaying or not columns, what if I want to change the order, for instance displaying from left to right: column1 | column2 or instead column2 | column1. Or even changing layouts depending on which fields are selected or not.

I can't get that by creating the complete delegate and "playing" with the visible property.

What I am doing now is creating the delegate in C++ by using QQmlComponent/setData. Is working but it has some drawbacks: is dificult to create the whole delegate from c++ and I cannot test if is working until I execute it, cannot use the designer nor the sqlscene tool, etc.

If someone has a better solution I would really appreciate it!

Thanks,

Diracsbracket

OK @XDePedro, I think I misunderstood what you were trying to achieve. I thought that every delegate could have a different customization, but now I understand that all delegates have the same layout, which is customizable by the user, but that doesn't make it any easier. Good luck!

devDawg

Hi @XDePedro,

My first piece of advice is to articulate on paper exactly what you want to do. This will help you gather your thoughts, break down what is needed, and make it easier to explain your ideas to other people.

This is funny, as I am trying to do a very similar thing. The delegate can be tricky to deal with, but if you break down what it does, the task becomes simpler.

I would advise surfing through this free online PDF about QML: https://qmlbook.github.io/assets/qt5_cadaques.pdf

It contains a ton of great info. One section, on page 93, talks specifically about the delegate property:
Each delegate gets access to a number of attached properties, some from the data model, others from the view. From the model, the properties convey the data for each item to the delegate. From the view, the properties convey state information related to the delegate within the view.

Now, I have not tested this idea, but hear me out.
-Assign enumerations to each different data type you might want to display in a particular item in this ListView (QString, Image, Graph, etc).
-Create a separate .qml file that is, at its root, of type Component, which then contains a Rectangle. You will use this class for your ListView delegate.
-Write a function (either in a C++ class that is registered as a singleton type or a context property, or directly embedded in QML as Javascript) that, based off of the enumeration it is given, displays the desired content in the form of an Item that, either contains some text, an image, or something else.

Pretty sure this is feasible. Your best friend is the internet. Look for examples of people attempting similar feats, & read through Qt Docs. You will figure it out!

Edit: Check out the QML types documentation on Item Delegate: http://doc.qt.io/qt-5/qml-qtquick-controls2-itemdelegate.html
This is exactly what you are looking for. It inherits the API from AbstractButton, meaning you can display text, icons, and checkables.