在 QML 中动态创建按钮答案

【问题标题】：Dynamic creation of a button in QML在 QML 中动态创建按钮
【发布时间】：2014-01-25 16:13:42
【问题描述】：

使用 qt 5.2，我正在尝试动态添加一个像这样的简单按钮：

ApplicationWindow
{
    id: appWindow

    width: 640
    height: 420
    minimumHeight: 400
    minimumWidth: 600

    function addButton() {

        var obj = Qt.createComponent("Button.qml");

        if (obj.status == obj.Ready)
        {
            var button = obj.createObject(appWindow);
            button.color = "red";
            button.width=50;
            button.height=80;
            button.x=50; button.y=50;
           }
     }


    Button {
        anchors.centerIn: parent;
        text: "ok";

        onClicked: {
            addButton();
        }
    } ...

但是在 createComponent 之后我总是得到：

QQmlComponent: 组件没有准备好

怎么了？

【问题讨论】：

按照示例here。 object.status 必须与 Component.Ready 枚举检查是否相等（==）。你也可以打印，像这样的错误if (component.status == Component.Error) { // Error Handling console.log("Error loading component:", component.errorString()); } 我希望，addButton 函数在静态按钮组件中没有解决。所以尝试在onClicked 事件处理程序中添加appWindow.addButton();。
我在文件开头添加了 import 语句，它可以正常工作，没有错误。我看到一个按钮

标签： qt components qml qtquickcontrols

【解决方案1】：

为确保组件准备就绪，最好的方法是在 QML 部分的 Component 对象中声明它，以便与文件的其余部分同时预加载：

ApplicationWindow {
    id: appWindow;

    Component {
        id: myButton;

        Button { }
    }

    function addButton () {
        var button = myButton.createObject (appWindow, {
                                                "color"  : "red",
                                                "width"  : 50,
                                                "height" : 80,
                                                "x"      : 50, 
                                                "y"      : 50
                                            });
    }

    ...
}

如您所见，我还冒昧地向您展示了一次性直接创建具有良好属性的对象的语法，而不是以老式的方式手动设置它们。更简洁的代码，可能更高效。

【讨论】：