如何从 QML JavaScript 构建 Qt Quick 对象？

Question

这看起来微不足道，但我无法在互联网上的任何地方找到答案。

我有一些 QML 代码，其中有一些 JavaScript 代码可以枚举数组并为数组中的每个项目创建一个按钮。我需要能够在 JavaScript 中初始化一个 Button 对象，但是运行 var btn = new Button() 会导致类型错误。

如何在运行时创建 Qt Quick 对象？

Answer 1

Qml 提供了很多方法来做到这一点。

使用Repeater（或其他基于模型的实例化器，视需要而定，如ListView、Instantiator），其模型可以是数组：

Row {
    Repeater {
        id: repeater
        delegate: Button {
            text: modelData
        }

        Component.onCompleted: repeater.model = ["button1", "button2"] // JS array
    }
}

如果您的数组比这更复杂，您可以将数组解析为 ListModel：

Row {
    Repeater {
        id: repeater1
        model: ListModel { }
        delegate: Button {
            text: model.myText
        }

        Component.onCompleted: {
            let array = ["button1", "button2"]
            for (let i = 0; i < array.length; i++) {
                repeater1.model.append({myText: array[i]})
            }
        }
    }
}

按照JarMan的建议，在JS中动态创建按钮（有很多方法可以做到这一点，如documentation he linked所示）：

Row {
    Component.onCompleted: {
        let array = ["button1", "button2"]
        for (let i = 0; i < array.length; i++) {
            let newButton = buttonComponent.createObject(this, {})
            newButton.text = array[i]
        }
    }

    Component {
        id: buttonComponent

        Button { }
    }
}

所有这些示例都会导致相同的结果：

如何从 QML JavaScript 构建 Qt Quick 对象？

How do I construct a Qt Quick object from QML JavaScript?

javascript

qt

qml