Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QML Prebuilt Items and Placement of new Items



  • 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
        }
    }
    




  • 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"
            }
        }
    }
    


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

    //PrebuiltItem.qml
    RowLayout{
    Button{}
    }

    //main.qml
    PrebuiltItem{Button{}}



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


Log in to reply