Change property of Dynamic Item in grid

echo55

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.

Diracsbracket

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

echo55

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
                                Constants.users["user"]["bundles"].forEach(
                                            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 .

dheerendra

Use the children property of item. e.g

for(var i=0;i<grid.children.length;i++){
      grid.chidren[i].color="blue"
}

MouseArea not required for every item of grid.

echo55

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.

dheerendra

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

echo55

the two code i sent just up .

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

Qt.createComponent("Bundle_content.qml")

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

dheerendra

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 ?

echo55

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.

dheerendra

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.

echo55

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 .

dheerendra

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){
                continue;
            }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.changeEveryBody.connect(changeColor);
                obj.val = i;
            }
        }
    }
}
========= ChildElement.qml ===============
import QtQuick 2.0

Rectangle {
    width: 100;height: 100;color: "red"
    property int val:0
    signal changeEveryBody(int val);
    MouseArea{
        anchors.fill: parent
        onClicked: {
            changeEveryBody(val)
        }
    }
}

echo55

Thank you very much.
It worked.

dheerendra

cool. please move the case to solved state