Qml沿行拆分Gridview

Question

我正在尝试创建一个矩形（图像）的QML网格视图，以便当我单击某个元素时，该视图会在该元素的正下方拆分。我撒谎在此拆分部分中显示一些文本，然后这些文本将出现。

Answer 1

我将使用GridLayout而不是GridView进行此操作，因为它允许列/行跨越，例如：

import QtQuick 2.10
import QtQuick.Controls 1.4
import QtQuick.Window 2.10
import QtQuick.Layouts 1.12

Window {
    visible: true
    width: 400
    height: 600
    title: qsTr("test")

    Component {
        id: commonItem
        Rectangle {
            anchors.fill: parent
            color: "#DEDEDE"
            Text { anchors.centerIn: parent; text: "Click me" }
        }
    }

    Component {
        id: selectedItem
        Rectangle {
            anchors.fill: parent
            color: "#999"
            Text { anchors.centerIn: parent; text: "I'm selected item" }
        }
    }

    GridLayout {
        anchors.centerIn: parent
        columns: 3
        columnSpacing: 2
        rowSpacing: 2
        Repeater {
            model: 6
            delegate: Item {
                id: item
                property int w: 100
                property int loaderColumns: 1
                property var component: undefined

                Layout.columnSpan: loaderColumns
                Layout.preferredWidth: w
                Layout.preferredHeight: 100
                state: "collapsed"

                Loader {
                    id: loader
                    anchors.fill: parent
                    sourceComponent: item.component
                }
                states: [
                    State {
                        name: "collapsed"
                        PropertyChanges { target: item; component: commonItem }
                    },
                    State {
                        name: "expanded"
                        PropertyChanges { target: item; component: selectedItem; }
                        PropertyChanges { target: item; loaderColumns: 3; }
                        PropertyChanges { target: item; w: 304; }
                    }
                ]
                MouseArea {
                    anchors.fill: parent
                    cursorShape: Qt.PointingHandCursor
                    onClicked: {
                        item.state = (item.state == "collapsed") ? "expanded" : "collapsed"
                    }
                }
                Behavior on w {
                    NumberAnimation {
                        duration: 1000
                        easing {
                            type: Easing.OutElastic
                            amplitude: 1.0
                            period: 0.5
                        }
                    }
                }
            }
        }
    }
}