Question

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

例如：

MapDisplayForm.ui.qml

Item{
   id:item1

   property alias map1

   Map{
       id: map1
       Component.OnCompleted : {
          //this is the function that i should write in Map.qml
       }
   }

}

MapDisplay.qml

MapDisplayForm{


   //it does not accept map1.oncompleted here


}

Answer 1

您可以执行以下操作：

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
    }
}

Answer 2

UI文件只能与设计器一起使用（对于命令式JS来说效果不佳）。解决方案可以是：

删除.ui或使用常见的.qml文件
使用一个属性来处理onCompleted事件，并使用您的qml文件中的该属性来执行您想要的下一个示例。

MapDisplayForm.ui.qml

Item {
   id:item1
   property bool propertyOnCompleted: false

   Map {
       id: map1
       Component.onCompleted: propertyOnCompleted = true
}

MapDisplay.qml

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

Answer 3

您可以使用“ 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
}

property alias sosSlider:sosSlider就像说this property is public，否则将无法正常工作。

form1.qml：

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

这为我解决了问题。

我喜欢拆分UI和功能的想法。它使人联想起Ionic / Angular和Django视图使用的MVC样式。它使使用UI变得非常容易，而不必担心依赖项或其他qml限制。

希望这会有所帮助！

如何将Component.onCompleted：{}方法从ui.qml转移到.qml？

3 个答案: