Important: Please read the Qt Code of Conduct -

Change property of Dynamic Item in grid

  • Hi,

    I'm trying to change the color of the border of my Item which are in a grid but created dynamically so if i understood well . they don't have an id so i can't access them.

    I have a mousearea on each item and when i click on it i change the color . but if you click on another one you must change all the others Item in this grid to "transparent" again.
    How can i do that ? i don't have an id .
    And the mousearea is in the Item where i can't access others Item color.

  • @echo55
    Can you show the code you have so far ?

  • Yes of course

    this is where i create it

                     Grid {
                                id: grid
                                anchors.fill: parent
                                rows: 4
                                columns: 2
                                spacing: 50
                                flow: Grid.LeftToRight
                                Component.onCompleted: {
                                    var c = Qt.createComponent("Bundle_content.qml")
                                    var i = 0
                                                function (info) {
                                                    var o = c.createObject(grid)
                                                    o.width = 300
                                                    o.height = 300
                                                    o.text = info["title"]
                                                    o.pic = info["image"]
                                                    o.v = info["title"]
                                                    o.index = i
                                                    i = i + 1

    and this is the component :

    Item {
        id: i
        width: 300
        height: 300
        property alias pic: image1.source
        property alias text: text1.text
        property int index: 0
        property var v: {
        Rectangle {
            id: rectangle
            color: "#00000000"
            anchors.fill: parent
            Rectangle {
                id: rectangle1
                x: 315
                y: 212
                width: 247
                height: 217
                radius: 0
                gradient: Gradient {
                    GradientStop {
                        position: 0
                        color: rectangle1.gradcolor1
                    GradientStop {
                        position: 1
                        color: rectangle1.gradcolor2
                border.color: "#00000000"
                anchors.leftMargin: 27
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
                property color gradcolor1: "transparent"
                property color gradcolor2: "transparent"
                anchors.left: parent.left
                Rectangle {
                    id: rectangle2
                    color: "#ffffff"
                    anchors.rightMargin: 10
                    anchors.leftMargin: 10
                    anchors.bottomMargin: 10
                    anchors.topMargin: 10
                    anchors.fill: parent
                Image {
                    id: image1
                    anchors.rightMargin: 5
                    anchors.leftMargin: 5
                    anchors.bottomMargin: 5
                    anchors.topMargin: 5
                    fillMode: Image.PreserveAspectCrop
                    property bool rounded: true
                    property bool adapt: true
                    anchors.fill: parent
                    layer.enabled: rounded
            Text {
                id: text1
                x: 308
                y: 264
                width: 145
                height: 36
                text: qsTr("Error")
                font.bold: true
                anchors.horizontalCenterOffset: 1
                horizontalAlignment: Text.AlignHCenter
                font.pixelSize: 25
                anchors.horizontalCenter: parent.horizontalCenter

    so i want to change gradcolor1 and 2 outside of the component (where the grid is ) but i can't access a particulary one .

  • Qt Champions 2017

    Use the children property of item. e.g

    for(var i=0;i<grid.children.length;i++){

    MouseArea not required for every item of grid.

  • Alright great news,

    I want it to be trigger when i click on of the Items, but it needs to access grid which isn't in the same file .
    If i do a function and try to call it in the children it doesn't work (not recognized).

    Here is an easy way to do that ?

    Thank you.

  • Qt Champions 2017

    What do you mean by not in same file ? Can you give me the sample code please ?

  • the two code i sent just up .

    It's from two different files (.qml)
    i use


    to create in the current file a component from another file so Bundle_content.qml

  • Qt Champions 2017

    Objects created from Button_Component.qml becomes child of Grid. Why do you want to access the parent grid inside the child objects ? Do you want to change something in grid ?

  • I want to change the variable color gradcolor1 and gradcolor2 from the grid .
    but only when the mousearea of any of the children of grid is pressed.

  • Qt Champions 2017

    Define the signal in your component. Emit the signal when you click. Catch the signal in main. Not a good idea to access the parent inside the child objects.

  • I tried to do that but the problem is that i want to change color of every component except the one clicked .
    How can i send a signal saying to change color of all of it minus the one who emitted it .

  • Qt Champions 2017

    OK. You can try something similar to the following. It is simple concept to show how you can work with object.

    ===== main.qml =========
    import QtQuick 2.11
    import QtQuick.Window 2.11
    Window {
        visible: true
        width: 440
        height: 480
        title: qsTr("Hello World")
        property var comp:null
        function changeColor(val){
            for(var i=0;i<grid.children.length;i++){
                var obj = grid.children[i];
                if (obj.val===val){
                }else {
                    obj.color = "blue"
        Grid {
            id : grid
            spacing: 5
            anchors.fill: parent
            Component.onCompleted: {
                for (var i=0;i<12;i++){
                    if (comp==null){
                        comp = Qt.createComponent("ChildElement.qml");
                    var obj = comp.createObject(grid)
                    obj.val = i;
    ========= ChildElement.qml ===============
    import QtQuick 2.0
    Rectangle {
        width: 100;height: 100;color: "red"
        property int val:0
        signal changeEveryBody(int val);
            anchors.fill: parent
            onClicked: {

  • Thank you very much.
    It worked.

  • Qt Champions 2017

    cool. please move the case to solved state

Log in to reply