javascript - 如何在 QML 中动态添加项目到 VisualItemModel？

Question

我有一个基于文本框的自定义 qml 元素。我希望每当用户按下 VisualItemModel 中的最后一个文本框时，都会自动添加一个新的文本框。有一种方法可以使用 ListModel(使用 append())执行此操作，但不能使用 VisualItemModel。

如何做到这一点？甚至 Javascript 也会有所帮助。

Answer 1

似乎 VisualItemModel 并不是真正为动态管理而设计的——它是一个纯静态结构。

VisualItemModel 是一种懒惰且笨拙的解决方案，用于获取 ListView 以显示不同的元素，将数据和 UI 塞在一起。如果这是重点，您可以通过使用标准 ListModel 和 ListView 轻松实现:

ListView {
    anchors.fill: parent
    model: mod
    delegate: Loader {
        source: name + ".qml"
    }
}

然后你可以像这样附加到模型:

mod.append({"name" : "ItemName"})

然后在 ListView 中，委托(delegate)将为每个列表条目创建适当的元素。

如果您不希望项目有单独的来源，您可以将不同的项目包装在 Component 和 Loader 中，而不是 source 设置 sourceComponent: name:

Component {
    id: c2
    Rectangle {
        width: 200
        height: 100
        color: "blue"
    }
}

....
mod.append({"name" : c2})

但在您的情况下，您似乎不需要不同的元素来拥有不同的 UI，因此您实际上也不需要 VisualItemModel。只需让 View 委托(delegate)一个文本框并附加到标准 ListModel，您就会得到另一个文本框。