Holding common objects as a list in QML

Question

I am having an architectural problem in the app I am developing in QML. Please consider the following figure:

Some facts about the application:

1. I need to store an array of elements names, here it is Orange, Apple and Banana.
2. The amount of elements is fixed and will not change at runtime.
3. Although there are only 1 array of elements, it should be possible to present the in different graphical forms at the same time. In the example, the elements are once represented as yellow squares, and other time as green triangles. They do not necessarily have to be shown in the same order. But the order also doesn't change at runtime.

I want to avoid unnecessary code copying, thus, wanted to use only 1 list with different graphical representations. I am having problems implementing this however.

Answer 1

I don't quite understand what OP wants to archive, but I guess that model is what you need. This is a simple example of reusable model:

import QtQuick 2.11
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 600
    height: 400
    title: qsTr("Model example")

    ListModel {
        id:  myModel;
        ListElement { name: "Apple" }
        ListElement { name: "Orange" }
        ListElement { name: "Banana" }
    }

    Repeater {
        model: myModel
        delegate: type1
    }

    Repeater {
        model: myModel
        delegate: type2
    }

    ListView {
        model: myModel
        delegate: Text { text: name; height: 30; }
        width: 100
        height: 200
    }

    ComboBox {
        width: 100
        y: 200
        model: myModel
    }

    Component {
        id: type1
        Canvas {
            x: 100 + Math.round(Math.random() * 400)
            y: Math.round(Math.random() * 100)
            rotation: Math.round(Math.random() * 360)
            antialiasing: true
            width: 100
            height: 100
            onPaint: {
                var ctx = getContext("2d");
                ctx.fillStyle = "#00DD00";
                ctx.beginPath();
                ctx.moveTo(50, 0);
                ctx.lineTo(100, 100);
                ctx.lineTo(0, 100);
                ctx.fill();
            }
            Text {
                anchors.centerIn: parent
                text: name
            }
        }
    }

    Component {
        id: type2
        Rectangle {
            x: 100 + Math.round(Math.random() * 400)
            y: 200 + Math.round(Math.random() * 100)
            rotation: Math.round(Math.random() * 360)
            antialiasing: true
            width: 100
            height: 100
            color: "orange"
            Text {
                anchors.centerIn: parent
                text: name
            }
        }
    }
}

Answer 2

Welp, can't comment until I have enough reputation, but can't you just use QAbstractListModel for this? Then you could use two path views that determine where the objects go. Here's an example, but you would have your own QAbstractListModel instead of the examples ListModel. The delegate would determine the shape of the items.

The reason to use QAbstractListModel over QML's ListModel is because ListModel is created runtime.