如何延迟 qml 中加载器元素内容的可见性?

Question

我正在使用加载器元素以异步方式加载主内容qml，并在窗口上主动显示另一个qml的同时准备好它。

我正在尝试在 2 秒的计时器到期时显示loader_two内容。但是，即使在计时器到期之前，loader_two一旦加载，它就会立即可见。我如何实现这一点？

这是我的代码。

Loader{
id:loader_one
active: true
visible: true
anchors.fill: parent
asynchronous: true
source: "Start.qml"
onLoaded: {
loader_two.active = true
show_content_timer.start()
}
}
Loader{
id:loader_two
active:false
anchors.fill: parent
asynchronous: true
source: "Main_content.qml"
}
Timer{
id: show_content_timer
interval: 2000
repeat: false
running: false
triggeredOnStart: false
onTriggered:
{
console.log("2seconds expired")
loader_one.source = ""
loader_one.item.visible = false;
loader_two.item.visible = true;
}
}

Answer 1

使用组件，然后执行 Component.create(( 以创建一个将远程加载的项，但在调用 Component.create(( 之前不会显示

Loader {
id: loader_one
active: true
visible: true
anchors.fill: parent
asynchronous: true
source: "Start.qml"
onLoaded: {
loader_two.active = true
show_content_timer.start();
}
}
Component {
id: loaderComponent 

Loader{
id:loader_two
active:false
anchors.fill: parent
asynchronous: true
source: "Main_content.qml";
}
}
Timer {
id: show_content_timer
interval: 2000
repeat: false
running: false
triggeredOnStart: false
onTriggered:
{
console.log("2seconds expired")
loaderComponent.create();
}

Answer 2

我可以通过默认将loader_two的可见性设置为 false 并在计时器到期后将其设置为 true 来实现延迟。我通过控制之前不起作用的 loader_two.item.visible 属性来尝试相同的方法。

这是我的最终工作代码。谢谢。

Loader{
id:loader_one
active: true
visible: true
anchors.fill: parent
asynchronous: true
source: "Start.qml"
onLoaded: {
loader_two.active = true
show_content_timer.start()
}
}
Loader{
id:loader_two
active:false
visible: false
anchors.fill: parent
asynchronous: true
source: "Main_content.qml"
}
Timer{
id: show_content_timer
interval: 2000
repeat: false
running: false
triggeredOnStart: false
onTriggered:
{
console.log("2seconds expired")
loader_one.source = ""
loader_one.item.visible = false;
loader_two.visible = true;
}
}