Qt 如何将Component.onCompleted:{}方法从ui.qml传输到.qml？

我正在通过分离ui.qml文件和.qml文件来开发一个项目。因此，我将功能代码javascript代码写入.qml文件，并将设计代码写入ui.qml文件。但是，我在.qml文件中使用Component.onComplete功能时遇到问题

例如：

MapDisplayForm.ui.qml

MapDisplay.qml

---

您可以执行以下操作：

Item {
   id:item1
   signal mapCompleted() // <-- custom signal
   property alias mapDisplay

   Map {
       id: map1
       Component.OnCompleted : {
          item1.mapCompleted(); // <-- emit custom signal
       }
   }
}

因此：

MapForm {
    onMapCompleted: { // <-- handle custom signal
    }
}

---

UI文件只能与设计器一起使用，而设计器不能很好地与命令式JS配合使用。解决办法可以是：

删除.ui或使用公共.qml文件 使用属性来处理onCompleted事件，并在qml文件中使用该属性来执行您想要执行的操作，如下一个示例所示。 MapDisplayForm.ui.qml

MapDisplay.qml

---

可以使用QML连接项解决此问题。 作为我的form1.qml中的一个例子，我有

SlideToAction {
    id: sosSlider
    height: 80
    Component.onCompleted: {
        if (window.getHomeLocation()) {
            normalBMargin = 0
        } else {
            normalBMargin = -80
        }
    }
}

要将其转换为form1Form.ui.qml和form1.qml格式： form1Form.ui.qml：

property alias sosSlider:sosSlider
SlideToAction {
    id: sosSlider
    height: 80
}

属性别名sosSlider:sosSlider类似于说此属性是公共的，否则将无法工作

表格1.qml：

Connections {
    target: sosSlider
    Component.onCompleted {
        // Your code here
    }
}

这为我解决了问题

我喜欢将UI和功能分开的想法。它让人想起了Ionic/Angular和Django视图使用的MVC样式。它使用户界面的使用变得非常容易，而不必担心依赖关系或其他qml限制

---

希望这有帮助

我觉得一些解释会有帮助。应该在QML代码中使用的项必须通过添加属性关键字导出。本文对此进行了描述，强调了qml UI表单和常规qml代码之间的区别。感谢您的回答，但我想我无法清楚地解释我的问题。当我在ui.qml文件中使用Component.Oncompleted方法时，该结构不支持它，因为它是一项功能，所以我应该导出map1并在qml文件中访问它，如map1.Oncompleted，但我不能这样做。我是否缺少图片？MapForm实例化Map Map实例化MapForm？您想在Component.OnCompleted中执行什么操作？在地图的父级中使用Component.OnCompleted可能还不够，或者因为这就是那个项目，祖父母对不起，代码有点错误，我只是编辑了它。我想使用onCompleted方法根据当地时间选择地图类型夜地图或日地图

MapDisplayForm {
        onPropertyOnCompletedChanged: {
        console.log("Map1 Completed")
    }
}

SlideToAction {
    id: sosSlider
    height: 80
    Component.onCompleted: {
        if (window.getHomeLocation()) {
            normalBMargin = 0
        } else {
            normalBMargin = -80
        }
    }
}

property alias sosSlider:sosSlider
SlideToAction {
    id: sosSlider
    height: 80
}

Connections {
    target: sosSlider
    Component.onCompleted {
        // Your code here
    }
}