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

Adding to a custom component



  • Hi
    I have a custom component defined as

    Item {
        GroupBox {
            id: groupBox
            x: 93
            y: 132
            width: 200
            height: 200
            title: qsTr("Group Box")
    
            RoundButton {
                id: roundButton
                x: 15
                y: 49
                width: 119
                height: 40
                text: "FFFF"
              }
    
            RoundButton {
                id: roundButton1
                x: 37
                y: 104
                width: 109
                height: 40
                text: "+"
            }
    
        }
    }
    

    I can use it like this

    MyComponent {
            id: myComponent
            x: -45
            y: 123
        }
    }
    

    Now what I want to do is to add more elements to the used component (not to the base) -

    ```
    

    MyComponent {
    id: myComponent
    x: -45
    y: 123

       Button {
            text: "new Text"
        }
    }
    

    this places the new button outside of the component.
    Is this possible?



  • hi @GrahamLa
    Try to delete your Componets top level item Item

    //Item {
    GroupBox {
    ...
    //}



  • You also can define MyComponent like this :

    import QtQuick 2.0
    import QtQuick.Controls 2.0
    import QtQuick.Layouts 1.3
    
    Item {
        default property alias contentData : content.data
        GroupBox {
            title: qsTr("Group Box")
            anchors.fill: parent
            RowLayout{
                id: content
                anchors.fill: parent
    
                Button{
                    text: "def btn 1"
                }
                Button{
                    text: "def btn 2"
                }
            }
        }
    }
    
    

    and use it :

        MyComponent {
            anchors.centerIn: parent
            height: 100
            width: contentItem.width
            Button{
                text: "btn 3"
            }
    
        }
    


  • Thanks all


Log in to reply