如何延迟qml中Loader元素内容的可见性?

时间:2018-05-09 11:45:21

标签: qt qml loader

我正在使用Loader元素以异步方式加载主要内容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;
    }
}

2 个答案:

答案 0 :(得分:0)

使用Component然后执行Component.create()以创建将远程加载的Item,但在调用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();
    }

答案 1 :(得分:0)

我可以通过默认将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;
}
}