change property of Component inside Loader

Jmueller

i want to place a list of buttons on the screen.
to avoid double code i read that i can use Loader contaminated with Components.
now i had the problem to modify property of the Component.

item {
   /*first button*/
    Loader {
            id: secondButton
            sourceComponent: slotView
            ......
    }
    /*second button*/
    Loader {
            id: secondButton
            anchors.bottomMargin: 5
            anchors.bottom: firstButton.top
            sourceComponent: slotView
            /*try something like textSlotView.text="second Button Text"*/
     }

    /*general Slot*/
    Component{
        id: slotView
        Rectangle {
              id: rectInside
              height: 50
              width: 220
              color: "#49585f"
              Text {
                   id: textSlotView
                   anchors {
                              left: rectInside.left
                              leftMargin: 20
                              verticalCenter: rectInside.verticalCenter
                    }
                    color: "white"
                    font.pixelSize: 20
                    text: ""
               }
          }
    }
}

so the question is, how can i modify property like text our height from the Loader component?

J.Hilk

@Jmueller said in change property of Component inside Loader:

so the question is, how can i modify property like text our height from the Loader component?

via the item property of the loader
https://doc.qt.io/qt-5/qml-qtquick-loader.html#item-prop

Jmueller

I am not sure how to use the item:QtObject

i try:

    Loader {
            id: secondButton
            anchors.bottomMargin: 5
            anchors.bottom: firstButton.top
            sourceComponent: slotView
           item.label: "second Button Text"            
     }

/*general Slot*/
    Component{
        id: slotView
       property string label;
        Rectangle {
              id: rectInside
              height: 50
              width: 220
              color: "#49585f"
              Text {
                   id: textSlotView
                   anchors {
                              left: rectInside.left
                              leftMargin: 20
                              verticalCenter: rectInside.verticalCenter
                    }
                    color: "white"
                    font.pixelSize: 20
                    text: slotView.label
               }
          }
    }

but Qt told me that "label" is not part of the QtObject

J.Hilk

ok @Jmueller

to ways to modify the property like you want it to:

Passing on/accessing a property part of the Loader:

Loader {
        id: secondButton
        anchors.fill: parent
        sourceComponent: slotView
        property string label:" second Button Text"
    }

    /*general Slot*/
    Component{
        id: slotView
        Rectangle {
            id: rectInside
            height: 50
            width: 220
            color: "#49585f"
            Text {
                id: textSlotView
                anchors {
                    left: rectInside.left
                    leftMargin: 20
                    verticalCenter: rectInside.verticalCenter
                }
                color: "white"
                font.pixelSize: 20
                text: label
            }
        }
    }

2.Using manual binding

Loader {
        id: secondButton
        anchors.fill: parent
        sourceComponent: slotView
        Binding{
            target: secondButton.item
            when:secondButton.status == Loader.Ready
            property: "label"
            value: "second Button Text"
        }
    }

    /*general Slot*/
    Component{
        id: slotView
        Rectangle {
            id: rectInside
            height: 50
            width: 220
            color: "#49585f"
            property string label;
            Text {
                id: textSlotView
                anchors {
                    left: rectInside.left
                    leftMargin: 20
                    verticalCenter: rectInside.verticalCenter
                }
                color: "white"
                font.pixelSize: 20
                text: parent.label
            }
        }
    }

there are more ways, but this should get you started, I think

Jmueller

Thank you.

That seems to be suitable for me :)