Holding common objects as a list in QML - qt

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:
I need to store an array of elements names, here it is Orange, Apple and Banana.
The amount of elements is fixed and will not change at runtime.
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.