Как задержать видимость содержимого элемента Loader в qml?

Question

Я использую элемент Loader для асинхронной загрузки основного содержимого qml и его готовности, когда в окне активно отображается другой qml.

Я пытаюсь показать содержимое loader_two по истечении 2 секунд. Но 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

Я могу добиться задержки, установив видимость 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;
}
}

Answer 2

Используйте Component, а затем выполните 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();
    }