如何延迟 qml 中 Loader 元素内容的可见性？答案

【问题标题】：How to delay the visibility of a Loader element content in qml?如何延迟 qml 中 Loader 元素内容的可见性？
【发布时间】：2018-05-09 11:45:20
【问题描述】：

我正在使用 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;
    }
}

【问题讨论】：

你毫不拖延地将loader_two.active = true 设置为loader_one.onLoaded。
我正在设置它，因为我需要加载器二的内容在后台准备好。如果 Loader 处于非活动状态，则更改源不会导致项目被实例化，直到 Loader 处于活动状态。

标签： qt qml loader

【解决方案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();
    }

【讨论】：

但是使用组件不会立即实例化内容吗？这会影响启动时间。
如果你希望动态实例化它，你总是可以使用 C++ 来实现你的目标，通过 QTimer::singleShot 和 QQmlComponent::create() 实现

【解决方案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;
}
}

【讨论】：