QML Prebuilt Items and Placement of new Items

fcarney

Lets say I have a prebuilt Item like this:

import QtQuick 2.12
import QtQuick.Controls 2.12

Item {
    Button {
        id: button1
        width: 100
        text: "button1"
        anchors.left: parent.left
    }
}

I then include it like this and add another sub Item to that item:

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Item World")

    PrebuiltItem {
        Button {
            id: button2
            width: 100
            text: "button2"
            // What can I use to position relative to what is in PrebuiltItem
            anchors.left: parent.left
        }
    }
}

Is there a way to place the new item (in this case a Button) next to what is already in the item?

It won't see ids for the items that are already in the item.

Hmmm, maybe this might work:

property var lastItem: idOfLastItem
...
Item{
    Button{
        anchors.left: lastItem.left
    }
}

fcarney

I think this might be what I am looking for:
https://together.jolla.com/question/4717/how-to-position-nested-items-in-a-qml-component/

fcarney

Now I get it:
PrebuiltItem.qml

import QtQuick 2.12
import QtQuick.Controls 2.12

Item {
    // places items by default in content object
    default property alias _contentChildren: row0.data
    Row {
        id: row0
    }

    // places items when using this syntax
    /*
      row1: Item{} // as item
      row2: [Item{}, Item{}] // as list
      */
    property alias row1: row1.children
    property alias row2: row2.children
    property alias row3: row3.children
    Row {
        id: row1
        anchors.left: row0.right
    }

    Row {
        id: row2
        anchors.left: row1.right
    }

    Row {
        id: row3
        anchors.left: row2.right
    }
}

main.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Item World")

    PrebuiltItem {
        Text {
            text: "one"
        }
        row1: Text {
            text: "two"
        }

        row2: [
        Text {
            text: "three"
        },
        Text {
            text: "three"
        }]

        row3: Text {
            text: "four"
        }
    }
}

ODБOï

@fcarney you can have RowLayout or Row as root item in the PrebuiltItem

//PrebuiltItem.qml
RowLayout{
Button{}
}

//main.qml
PrebuiltItem{Button{}}

fcarney

My objects will be a lot more complex than that. With nested rects, layouts, etc.

Solved QML Prebuilt Items and Placement of new Items