我需要创建许多相似的元素，这些元素只在坐标上有所不同。
我学会了如何一个接一个地创建这个：
Repeater {
model: ListModel {
ListElement { p:100; q:100; w:50; h:50; c:"red"; o:0 }
ListElement { p:200; q:100; w:50; h:50; c:"red"; o:0 }
ListElement { p:300; q:100; w:50; h:50; c:"red"; o:0 }
ListElement { p:400; q:100; w:50; h:50; c:"red"; o:0 }
ListElement { p:500; q:100; w:50; h:50; c:"red"; o:0 }
}
delegate: Rectangle {
x: p
y: q
width: w
height: h
color: c
rotation: o
}
}
我现在得出的结论是，用一个简单的for循环来做这件事会很方便，在计算坐标时使用循环索引：
Repeater {
model: ListModel {
for ( var i = 1; i <= 5; i++ )
{
ListElement { p:100*i; q:100; w:50; h:50; c:"red"; o:0 }
}
}
delegate: Rectangle {
x: p
y: q
width: w
height: h
color: c
rotation: o
}
}
不幸的是，循环作用域有一个问题，当然我甚至不认为它会以这种形式工作。。。我试图在第二段代码中只显示我的想法。
有机会创建这样的ListElement吗？还是我混淆了两种不同的项目创建方式？
如上所述，在开始编写程序之前，您需要学习基础知识。不能用这种方式混合QML和Javascript。在我看来，ListElement在这里也完全不合适。
以下是如何重写：
Repeater {
model: 5
delegate: Rectangle {
x: 100 * index
y: 100
width: 50
height: 50
color: "red"
rotation: 0
}
}
如果你需要更多的数据控制，你可以改为：
Repeater {
model: [1, 2, 3, 4, 5]
delegate: Rectangle {
x: 100 * modelData
...
}
}
对于您的示例，我强烈推荐@folibis answer，因为它演示了index和modelData的用法，这两种方法都最适合您的场景。
一般来说，你可以混合QML/Javascript，你只需要更多的练习来了解正确的语法/上下文，你可以在哪里使用QML，在哪里可以使用Javascript。此外，在一些legimite场景中，您希望以编程方式填充ListModel。
在下面的演示中，ListModel是强制性地用JavaScript编程填充的。事实上，它甚至在所有QML组件初始化后执行，因此，Repeater最初实际上看到一个空的ListModel。在执行populate功能时，每个append都会向ListModel发出信号，您的Repeater将通过增量更新来确认。
import QtQuick
import QtQuick.Controls
Page {
Repeater {
model: listModel
delegate: Rectangle {
x: p
y: q
width: w
height: h
color: c
rotation: o
}
}
ListModel {
id: listModel
function populate() {
for ( let i = 1; i <= 5; i++ )
{
listModel.append( { p:100*i, q:100, w:50, h:50, c:"red", o:0 } );
}
}
}
Component.onCompleted: listModel.populate()
}
你可以在线试用！
前段时间，当我和孩子们一起玩QML时，我们模仿了一个"；点击入侵者；游戏游戏具有以下功能：
- ListModel将包含入侵者的位置
- 中继器用于渲染入侵者
- 计时器对象用于保证10个入侵者缓慢出现在屏幕上
- 当用户点击时，入侵者将"；模具；并被移除-这将触发更多入侵者产卵
看看吧。它有一些概念，例如使用SVG来渲染图形。它动态地创建和销毁不同位置和方向的物体：
https://github.com/stephenquan/qmlonline6/wiki/Example-Click-Invaders
在没有JavaScript知识的情况下使用Qt Quick时，文档中一个非常重要的部分：
https://doc.qt.io/qt-6/qtqml-javascript-expressions.html
如果你没想到除了C++和Qt之外，你还需要学习一些东西，这是一个必看的地方。
QML提供的JavaScript环境比web浏览器中的环境更严格。例如，在QML中，您不能添加或修改JavaScript全局对象的成员。在常规JavaScript中，使用变量而不声明变量可能会意外地做到这一点。在QML中，这会引发异常，因此所有本地变量都必须显式声明。有关从QML执行的JavaScript代码的限制的完整描述，请参阅JavaScript环境限制。
QML文档的各个部分可以包含JavaScript代码：
属性绑定的主体。这些JavaScript表达式描述QML对象属性之间的关系。当属性的依赖关系发生变化时，该属性也会根据指定的关系自动更新。信号处理程序的主体。每当QML对象发出相关信号时，就会自动评估这些JavaScript语句。自定义方法的定义。在QML对象的主体中定义的JavaScript函数将成为该对象的方法。独立的JavaScript资源(.js)文件。这些文件实际上与QML文档是分开的，但它们可以导入到QML文档中。在导入的文件中定义的函数和变量可以用于属性绑定、信号处理程序和自定义方法。
应仔细区分Qt Quick中的JavaScript和QML元素。如果QML是一种用于创建GUI的语言，那么它的元素是doc.qt.io中描述的类型。另一方面，循环、变量定义、数组等都是JavaScript元素。一开始并不那么明显。顺便说一句，如果有人没有用JS编程，只用C++编程，这是一堂很好的课。这两种语言的语法相近这可能令人惊讶。
上面的文档部分解释了这些依赖性