Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

"Proper" way to create splash screen in Qt Quick2?



  • I'm working on a desktop application and I'm making an effort to use Qt Quick2 instead of QWidgets. I'm having some trouble figuring out how to show a splash screen and provide status update messages while doing some background processing (run a bootstrapper, get data back, use it to initialization main window). In QWidgets this was simple. I just created a QSplashScreen and sent out events with update messages then deleted it and created the main window once I was ready. With Quick, the examples that I've seen are showing static splash screens and then using a Loader or Timer in QML to transition to the main window. However, I haven't seen any examples and can't quite figure out how to do some processing during startup and use that data to manually initialize and show the main window. Can anyone point me in the right direction? So far I've tried using a QQuickView to show the splash screen and I've tried simple calling the load method on QQmlApplicationEngine to show the splash screen and main window, but I haven't hit on a solution that works. I can provide example code if needed. Thanks


  • Moderators

    It isn't necessarily a splash window but when I needed a login window that would transition into the actual main window I just used a stackview. Here's the code that I used:

    import QtQuick 2.7
    import QtQuick.Controls 2.1
    
    ApplicationWindow {
        id: mainWindow
        title: qsTr("Qt/QML Demo")
        width: 800
        height: 600
        visible: true
        color: "#424141"
    
        property Component loginView: LoginWindow { onLoggedIn: stack.push(posView) }
        property Component posView: POSWindow { }
        property Component posViewLight: POSWindowLight { }
    
        StackView {
            id: stack
            anchors.fill: parent
            focus: true
            initialItem: loginView
        }
    }
    

    LoginWindow would transition to POSWindow or POSWindowLight based on settings when login successfully happened. I used a sideways wipe transition but you could just do it instantly too. The only thing is they share the same window.

    Edit: realized this was kind of a 1/2 answer... so here's more details:

    My LoginWindow has a signal loggedIn() that is sent when the login is successful. You could do this same thing but instead of a login you would be waiting on the data you are loading then when you have it, emit the mainWindowReady() signal or something to cause the transition.

    And if you don't want to use the same window instead of a StackView just show your splash window, then on signal, close it, and open your main window.



  • Perfect, I ended up going with a separate window for the splash screen and emitting a messageChanged signal to update the status message and a bootstrapperFinished signal to close the splash window. Works like a charm, thanks!


Log in to reply