我如何在qml中更改mouseArea的columnSpan onClicked事件？

Question

这是我的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 

             }
            }
        }
    }
}

我如何更改其MouseArea的最后一个Rectangle onClicked事件的columnSpan？

一般来说我想要每个Rectangle，当我点击他时，它的columnSpan变为1或2 o 3，同一行中其他两个Rectangle的属性宽度会自动改变

点击网格

之前

单击网格后

Answer 1

首先，将Rectangle与id属性相关联，然后可以使用其id属性来更改其范围：

 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 

         }
     }

Answer 2

快速而肮脏的解决方案是这样的：

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

但是，更干净的解决方案是在单独的文件（例如MyGridRect.qml）中定义一个组件，其中包含每个Rectangle中的所有内容，因此您不会复制代码。然后，您可以将onClicked行为保留到父组件，以决定要折叠/展开的对象。如果您在关于行为应该是什么的问题中更具体一点，那么为您提供一个代码示例将会更容易。