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

Question

这是我的 QML 应用程序窗口：

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 行为留给父组件来决定哪些对象 collapse/expand。如果您在关于行为应该是什么的问题中更具体一点，那么给您一个代码示例会更容易。

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

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

qt

qml

qtquick2