Change state on dynamic elements.

[Binpix]

Hello,
In my program I add some buttons dynamically and I try to switch between two mode. The first mode is to move the buttons and the second to make it clickable and non-movable.
My problem is I do not know how to change the state of an object dynamically added.

Here my source code:

import QtQuick 2.0
import QtQuick.Controls 1.0
 
Rectangle {
    id: page
    width: 360
    height: 360
    Text {
        text: qsTr("Hello World")
        anchors.centerIn: parent
    }
 
    Row {
        id: myRow
        anchors.fill: parent
    }
 
    Component {
        id: myRectComp
 
        Item {
            id: cell
            x: 0
            y: 30
 
            Button {
                y: 30
                text: qsTr("My Butt")
 
                MouseArea {
                    id: contentMouseArea
                    anchors.fill: parent
                    drag.target: cell
 
                    // States to make an element in edition mode (movable) or not (clickable)
                    states: [
                        State {
                            name: "movable"
                            PropertyChanges { target: myRow; anchors.fill: parent }
                        },
 
                        State {
                            name: "clickable"
                            PropertyChanges { target: myRow; anchors.fill: undefined  }
                        }
                    ]
                }
            }
        }
    }
 
    // Toolbar
    Row {
        id: toolbar
        anchors.fill: parent
 
        Button {
            x: 0
            y: 0
            text: qsTr("Add Button")
            onClicked: {
                var rect = myRectComp.createObject(myRow)
            }
        }
 
        Button {
            text: qsTr("Edition")
            checkable: true
            checked: true
            onClicked: contentMouseArea.state= 'clickable'
        }
    }
}

import QtQuick 2.0
import QtQuick.Controls 1.0

Rectangle {
    id: page
    width: 360
    height: 360
    Text {
        text: qsTr("Hello World")
        anchors.centerIn: parent
    }

    Row {
        id: myRow
        anchors.fill: parent
    }

    Component {
        id: myRectComp

        Item {
            id: cell
            x: 0
            y: 30

            Button {
                y: 30
                text: qsTr("My Butt")

                MouseArea {
                    id: contentMouseArea
                    anchors.fill: parent
                    drag.target: cell

                    // States to make an element in edition mode (movable) or not (clickable)
                    states: [
                        State {
                            name: "movable"
                            PropertyChanges { target: myRow; anchors.fill: parent }
                        },

                        State {
                            name: "clickable"
                            PropertyChanges { target: myRow; anchors.fill: undefined  }
                        }
                    ]
                }
            }
        }
    }

    // Toolbar
    Row {
        id: toolbar
        anchors.fill: parent

        Button {
            x: 0
            y: 0
            text: qsTr("Add Button")
            onClicked: {
                var rect = myRectComp.createObject(myRow)
            }
        }

        Button {
            text: qsTr("Edition")
            checkable: true
            checked: true
            onClicked: contentMouseArea.state= 'clickable'
        }
    }
}

To copy to clipboard, switch view to plain text mode 

Thank you for your help.

EDIT: I found that on http://qt-project.org/doc/qt-4.7/qde...-59d951346a29:

Also, note that while dynamically created objects may be used the same as other objects, they do not have an id in QML.

So how can I do?

[wysota]

When creating an object, assign it to some variable (like "rect" in your code but something you can access from outside the function creating the object). You can then access the object through the variable.

[Binpix]

Thank you. Do you have an example?

[wysota]

Here is one option:

Item {
  property Item dynamicItem
 
  function createItem() { dynamicItem = cmpnt.createObject(...); }
}

Item {
  property Item dynamicItem

  function createItem() { dynamicItem = cmpnt.createObject(...); }
}

To copy to clipboard, switch view to plain text mode 

[Binpix]

Thank you, but in my case I cannot figure out how to do to change the state of my element. Can you help me?

[wysota]

Assign the state name to the "state" property.