How i can change columnSpan onClicked event of MouseArea in qml?

Question

This my QML ApplicationWindow :

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    GridLayout {
        id : grid
        anchors.fill: parent
        rows    : 3
        columns : 3
        property double colMulti : grid.width / grid.columns
        property double rowMulti : grid.height / grid.rows
        function prefWidth(item){
            return colMulti * item.Layout.columnSpan
        }
        function prefHeight(item){
            return rowMulti * item.Layout.rowSpan
        }

      //  model: 9

        Rectangle {
            color : 'red'
            Layout.rowSpan   : 1
            Layout.columnSpan: 1
            Layout.preferredWidth  : grid.prefWidth(this)
            Layout.preferredHeight : grid.prefHeight(this)

        }
        Rectangle {
            color : 'yellow'
            Layout.rowSpan   : 1
            Layout.columnSpan: 1
            Layout.preferredWidth  : grid.prefWidth(this)
            Layout.preferredHeight : grid.prefHeight(this)
        }
        Rectangle {

            color : 'green'
            Layout.rowSpan : 1
            Layout.columnSpan : 1
            Layout.preferredWidth  : grid.prefWidth(this)
            Layout.preferredHeight : grid.prefHeight(this)
        }
        Rectangle {
            color : 'red'
            Layout.rowSpan   : 1
            Layout.columnSpan: 1
            Layout.preferredWidth  : grid.prefWidth(this)
            Layout.preferredHeight : grid.prefHeight(this)

        }
        Rectangle {
            color : 'yellow'
            Layout.rowSpan   : 1
            Layout.columnSpan: 1
            Layout.preferredWidth  : grid.prefWidth(this)
            Layout.preferredHeight : grid.prefHeight(this)
        }
        Rectangle {

            color : 'green'
            Layout.rowSpan : 1
            Layout.columnSpan : 1
            Layout.preferredWidth  : grid.prefWidth(this)
            Layout.preferredHeight : grid.prefHeight(this)
        }
        Rectangle {
            color : 'red'
            Layout.rowSpan   : 1
            Layout.columnSpan: 1
            Layout.preferredWidth  : grid.prefWidth(this)
            Layout.preferredHeight : grid.prefHeight(this)

        }
        Rectangle {
            color : 'yellow'
            Layout.rowSpan   : 1
            Layout.columnSpan: 1
            Layout.preferredWidth  : grid.prefWidth(this)
            Layout.preferredHeight : grid.prefHeight(this)
        }
        Rectangle {

            color : 'green'
            Layout.rowSpan : 1
            Layout.columnSpan : 1
            Layout.preferredWidth  : grid.prefWidth(this)
            Layout.preferredHeight : grid.prefHeight(this)
            MouseArea {
             anchors.fill: parent
             onClicked: {

              // how can i change the columnSpan 

             }
            }
        }
    }
}

How i can change the columnSpan of the last Rectangle onClicked event of the his MouseArea?

In general i want for each Rectangle,when i click on him ,its columnSpan change into 1 or 2 o 3, and the property width of the other two Rectangles in the same row automatically change

before click grid

after click grid

Answer 1

The quick and dirty solution goes something like this:

MouseArea {
     anchors.fill: parent
     onClicked: {
         parent.Layout.columnSpan = 3; // or 2 or 1
     }
 }

However, the cleaner solution is to define a component in a separate file (MyGridRect.qml for example) that contains everything within each of these Rectangles so you aren't duplicating code. Then you can leave the onClicked behavior up to the parent component to decide which objects to collapse/expand. If you were a little more specific in your question about what the behavior should be, it would be easier to give you a code example of how this would work.

Answer 2

First, associate your Rectangle with id property, then you can use its id property to change its span:

 Rectangle {
     id: myrect6    
     color : 'green'
     Layout.rowSpan : 1
     Layout.columnSpan : 1
     Layout.preferredWidth  : grid.prefWidth(this)
     Layout.preferredHeight : grid.prefHeight(this)
     MouseArea {
         anchors.fill: parent
         onClicked: {
             myrect6.columnSpan : 2
             // how can i change the columnSpan 

         }
     }