Question

我已经做了一些搜索，但是我找不到答案，答案必须如此简单，到目前为止还没有保证一个问题。无论如何，我是QML的新手，并且正在努力寻找一种在创建后动态地向Grid添加项目的方法。

基本上我有一个带有Grid的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事件中添加什么来实现向ImageGrid添加两个新的ImageTile实例。

提前感谢您的帮助！

Answer 1

因此，感谢MrEricSir向正确的方向推进，我已经把这个问题弄明白了。

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

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 }
        }
    }
}

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

1 个答案: