javascript - 创建后如何将项目添加到 QML 网格？

Question

我已经做了一些搜索，但我没能找到一个答案，这个答案一定很简单，到目前为止还没有必要提出问题。无论如何，我是 QML 的新手，正在努力寻找一种在创建后动态地将项目添加到网格的方法。

基本上我有一个带有网格的 Flickable，其中包含(默认情况下)名为 ImageTile 的自定义类的四个实例，当 MouseArea 检测到有点击时，它想向该网格添加 2 个 ImageTile 实例。

下面是一段代码:

Flickable {
    anchors.fill: parent
    contentWidth: 400
    contentHeight: 800
    clip: true

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onclicked: { /* ADD TWO ImageTile TO imageGrid */ }
    }

    Grid {
        id: imageGrid
        columns: 2
        spacing: 2

        Repeater {
            model: 4
            ImageTile { }
        }
    }
}

如您所见，我想知道我应该在 onClicked 事件中放入什么来实现将 ImageTile 的两个新实例添加到 imageGrid。

在此先感谢您的帮助!

Answer 1

因此，感谢 MrEricSir 将问题推向了正确的方向。

首先，我必须为 Repeater 指定一个合适的数据模型，然后分配一个委托(delegate)函数将数据模型中的信息转换为实际的 QML 元素。附加到数据模型会自动触发 Repeater 执行委托(delegate)函数。

Flickable {
    anchors.fill: parent
    contentWidth: 400
    contentHeight: 800
    clip: true

    ListModel {
        id: imageModel

        ListElement { _id: "tile0" }
        ListElement { _id: "tile1" }
        ListElement { _id: "tile2" }
        ListElement { _id: "tile3" }
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onclicked: {
            imageModel.append({ _id: "tile" + imageModel.count })
        }
    }

    Grid {
        id: imageGrid
        columns: 2
        spacing: 2

        Repeater {
            model: imageModel
            delegate: ImageTile { id: _id }
        }
    }
}