QML Loader加载耗时组件时UI冻结问题及解决方案咨询

问题描述 #

我需要在QML中实现：当后台加载重型组件时，显示带有AnimatedImage的闪屏。使用Loader进行后台资源加载后发现，Loader启动加载时，AnimatedImage所在的UI会出现冻结，但BusyIndicator却不会冻结。我的疑问如下：

1. Loader是否真的在后台运行？例如，若在组件构造函数中执行服务器连接这类耗时操作，Loader能否处理这种场景，还是必须将逻辑放到独立线程中？
2. 应如何处理此类场景以避免UI卡顿？

相关代码 #

window.qml #

import QtQuick 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts

Window {
    id:mainWindow
    y:100
    width: 640
    height: 480
    visible: true
    flags: Qt.FramelessWindowHint

    //splash screen
    Popup {
        id: popup
        width: mainWindow.width
        height: mainWindow.height
        modal: false
        visible: true

        Overlay.modeless: Rectangle {
            color: "#00000000"
        }

        //Splash loader
        Loader{
            id: splash
            anchors.fill: parent
            source: "qrc:/Splashscreen.qml"
        }
    }
    
    // Timer that will start the loading heavyObjects
    Timer {
        id: timer
        interval: 2000
        repeat: false
        running: true
        onTriggered: {
            loader.source = "qrc:/heavyObjects.qml"
            loader.active = true
        }
    }

    //write a loader to load main.qml
    Loader {
        id: loader
        anchors.fill: parent
        asynchronous: true
        active: false
        //when loader is ready, hide the splashscreen
        onLoaded: {
            popup.visible = false
        }

        visible: status == Loader.Ready
    }
}

SplashScreen.qml #

import QtQuick 2.0
import QtQuick.Controls 2.0
import QtQuick.Window 2.2

Item {
    Rectangle {
        id: splashRect
        anchors.fill: parent
        color: "white"
        border.width: 0
        border.color: "black"

        AnimatedImage {
            id: splash
            source: "qrc:/images/Rotating_earth_(large).gif"
            anchors.fill: parent
        }
    }
}

heavyObject.qml #

import QtQuick

Item {
    function cumsum() {
        for(var j=0;j<100;j++){
            var p = 0
            for (var i = 0; i < 1000000; i++) {
                p *= i
            }
        }
        return ""
    }

    // show dummy text that this is the main windows
    Text {
        text: "Main Window" + String(cumsum())
        anchors.centerIn: parent
    }
}

解决方案 #

问题1解答：Loader的后台运行逻辑 #

Loader的asynchronous: true属性仅会让组件的解析和实例化过程在后台线程完成，但组件内部的JavaScript同步代码（比如heavyObject.qml里的cumsum()函数）仍然会在Qt的主线程执行。这意味着：

• 如果耗时操作是组件加载本身（比如大QML文件的解析），Loader的异步模式可以缓解卡顿；
• 但如果是组件实例化后立即执行的同步耗时逻辑（比如你的cumsum()循环、或者构造函数里的服务器同步请求），这些代码会直接阻塞主线程，导致UI冻结。
  对于服务器连接这类耗时操作，Loader无法处理，必须放到独立线程中执行。

问题2解答：避免UI卡顿的具体方案 #

针对你的场景，有两种可行的解决思路：

1. 将耗时逻辑移到后台线程（推荐）

把cumsum()这类同步耗时操作放到C++的QThread中，或者用QML的WorkerScript来执行：

• WorkerScript方式：创建独立的JS文件存放耗时函数，通过WorkerScript在后台线程执行，执行完成后再通知主线程更新UI。
  示例步骤：
  • 创建worker.js：

    WorkerScript.onMessage = function(msg) {
        let p = 0;
        for(let j=0;j<100;j++){
            p = 0;
            for (let i = 0; i < 1000000; i++) {
                p *= i;
            }
        }
        WorkerScript.sendMessage({result: p});
    }
    

  • 修改heavyObject.qml：

    import QtQuick
    
    Item {
        WorkerScript {
            id: worker
            source: "qrc:/worker.js"
            onMessage: {
                txt.text = "Main Window" + message.result;
            }
        }
    
        Text {
            id: txt
            text: "Loading..."
            anchors.centerIn: parent
        }
    
        Component.onCompleted: {
            worker.sendMessage({});
        }
    }
    

2. 拆分组件加载和耗时逻辑执行

让Loader先异步加载完heavyObject.qml（不含耗时逻辑），加载完成后再通过Timer延迟启动耗时操作，给UI线程留出刷新时间：
修改heavyObject.qml：

import QtQuick

Item {
    function cumsum() {
        for(var j=0;j<100;j++){
            var p = 0
            for (var i = 0; i < 1000000; i++) {
                p *= i
            }
        }
        txt.text = "Main Window" + String(p);
    }

    Text {
        id: txt
        text: "Loading..."
        anchors.centerIn: parent
    }

    Timer {
        interval: 100
        running: false
        repeat: false
        onTriggered: cumsum()
    }

    Component.onCompleted: timer.start()
}

这种方式只是缓解卡顿，本质上耗时逻辑还是在主线程，适合耗时较短的场景，长期来看还是推荐用线程方案。

内容的提问来源于stack exchange，提问作者Saeed Masoomi