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
                                    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 .


  • Qt Champions 2017

    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.



  • 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

    Qt.createComponent("Bundle_content.qml")
    

    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){
                    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)
            }
        }
    }
    


  • Thank you very much.
    It worked.


  • Qt Champions 2017

    cool. please move the case to solved state


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.