Window (2) Splash and qtsplash of QT Demo

Window (2) Splash and qtsplash of QT Demo

In the window chapter of QT Demo, we learned some knowledge about QQuickWindow in the C ++ layer. In this chapter, we will focus on the Splash in the source code. the qml file demonstrates how to use the splash screen to display the application startup and interface.

The most intuitive and common example of the application startup interface is photoshop, which is the interface displayed when the PS is started:

In this example, a Qt Logo is displayed first, and then enters the main application window.

Source code structure

Splash. qml implements a custom window to complete the Splash screen function, including an Image and Timer:

Window {    id: splash    color: "transparent"    title: "Splash Window"    modality: Qt.ApplicationModal    flags: Qt.SplashScreen    property int timeoutInterval: 2000    signal timeout    x: (Screen.width - splashImage.width) / 2    y: (Screen.height - splashImage.height) / 2    width: splashImage.width    height: splashImage.height    Image {...}    Timer {...}    Component.onCompleted: visible = true}

Among them, the values of color/modality/flags are very important. They are described as follows in the help document:

A splash screen can be created with the Qt. splashScreen flag, and shoshould be ApplicationModal to prevent interaction with the main window. if the splash window is also transparent, and showing a partially transparent image, then it will look like a shaped window.

That is, a splash screen must be marked with Qt. SplashScreen and be a modal window (that is, the focus must stay on the splash screen window). These two items are the basic attributes of the splash screen. To improve user experience, an image (such as PhotoShop) is usually displayed, and gradient transparency is supported. Therefore, set the background color to transparent.

Window position and size

Because it is a splash screen, the display must be centered. Therefore, width and height are equal to the width and height of the displayed image, but the coordinates of x and y are calculated based on the tile size:

    x: (Screen.width - splashImage.width) / 2    y: (Screen.height - splashImage.height) / 2    width: splashImage.width    height: splashImage.height

The Screen object is used here. The Screen object is described as follows:
The Screen attached object provides information about the Screen an Item or Window is displayed on.

The Screen object defines the height, width, and other Screen-related attributes, all of which are read-only.

Displayed Image

The Image component used to display images. The code is relatively simple:

    Image {        id: splashImage        source: "../shared/images/qt-logo.png"        MouseArea {            anchors.fill: parent            onClicked: Qt.quit()        }    }

The reason for this analysis is that the onClicked Event Response Function of MouseArea is Qt. quit (). The purpose of this function is to exit the application.
However, in the actual test, we found that when the Splash window appears, clicking the mouse program did not exit, but the following error message is displayed in the debug window:
Signal QQmlEngine: quit () emitted, but no receivers connected to handle it.

How can I exit the application after clicking the button?TODO.

Hide the splash screen

From the design point of view, the function of Splash Screen is to perform initialization operations before the main window is started, such as loading the font library and paint brush in PhotoShop. However, in this example, A Splash Screen exit event is simulated by a Timer.

    Timer {        interval: timeoutInterval; running: true; repeat: false        onTriggered: {            visible = false            splash.timeout()        }    }

Use this Timer to combine the following two elements of the component:

    property int timeoutInterval: 2000    signal timeout

TimeoutInterval defines the trigger interval of Timer, while the timeout type is signal, which is a new type.

In the official documentation, how to add custom signal is described as follows:
Signals can be added to custom QML types through the signal keyword.
The syntax for defining a new signal is:
Signal <name> [([<type> <parameter name> [,...])]
A signal is emitted by invoking the signal as a method

In this example, a timeout signal is defined and the timeout () method is used to trigger the signal event.

The signal event response function is defined by default according to the following specifications:
Signal handlers for property change signal take the syntax form on <Property> Changed where <Property> is the name of the property, with the first letter capitalized.

The signal event response function of Splash. qml is named onTimeout, which is also used in window. qml:

    property var splashWindow: Splash {        onTimeout: controlWindow.visible = true    }

Therefore, with the combination of Timer and signal, the exit of the Splash Screen and the display of the main window are completed.

Display and hide windows

At the end of the Splash. qml code, there is such a line:

    Component.onCompleted: visible = true

Is it true that windows are hidden by default and do not display them manually? The answer is yes.

Visible: bool
This property holds whether the window is visible or not.
This property controls the visibility of the window in the specified Wing system.
By default, the window is not visible, you must call setVisible (true), or show () or similar to make it visible.

Therefore, the visible of the Splash Screen must be set to true in the Component. onCompleted event response function, and the external main window must be set to true in the onTimeout Event Response Function of the Splash Screen.

Summary

Knowledge points learned in this section:

In this chapter, we have learned a special example of the Window Splash Screen, which is also common in application scenarios. The use of the Splash Screen can greatly improve the user experience during application startup.
However, this chapter also leaves a trap in learning how to exit the program directly in the Splash Screen. Stay for future study...