QML concat list<QtObject> with static entries

I want to create a QML component with a ColumnLayout that consists of static items and items aquired as a parameter, something like this:

default property list<QtObject> content

ColumnLayout
{
  readonly property list<QtObject> defaultData: [
    Item { },
    Item { }
  ]
  data: defaultData.concat(content)
}

, but the qml list type does not implement concat.

Currently I have this workaround solution:

default property list<QtObject> content

ColumnLayout
{
  readonly property list<QtObject> defaultData: [
    Item { },
    Item { }
  ]
  data: getData();

  function getData() {
    const result = defaultData;
    for (let i = 0; i < content.length; i++) result.push(content[i]);
    return result;
  }
}

but although this works this throws property binding loop errors for data and is quite ugly. Of course nesting two ColumnLayouts is possible, but is there a better solution?

You can use the JS spread syntax for that:

component MyItem: ColumnLayout {
    default property list<QtObject> content
    readonly property list<QtObject> defaultData: [
        Rectangle {
            Layout.fillWidth: true
            Layout.preferredHeight: 30
            border.width: 1
        },
        Rectangle {
            Layout.fillWidth: true
            Layout.preferredHeight: 30
            border.width: 1
        }
    ]
    data: [...defaultData, ...content]
}

MyItem {
    anchors.centerIn: parent
    width: 400

    Rectangle {
        Layout.fillWidth: true
        Layout.preferredHeight: 30
        color: "grey"
    }
}

Though, it may not be exactly what you want, making use of Page header you can insert your static components before a user's components. In the following example, we implement a component that inserts "A" and "B" components, and the user supplies "C", "D" and "E" components:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
    Sample {
        ColumnLayout {
            TextField { text: "C" }
            TextField { text: "D" }
            TextField { text: "E" }
        }
    }
}

// Sample.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
     header: ColumnLayout {
        width: parent.width
        TextField { text: "A" }
        TextField { text: "B" }
     }
}

You can Try this Online!