QT Demo window (2) Splash

In the QT Demo window Chapter we learned some knowledge of qquickwindow in the C + + layer, this chapter we focus on the source of the Splash.qml file, the file shows us how to use the splash Screen to display the app's startup and interface.

One of the most intuitive and common examples of application launch interfaces is Photoshop, which is the interface that is displayed when PS starts:

In this example, a QT logo is displayed first and then into the main application window.

SOURCE structure

SPLASH.QML implements a custom window to complete the Splash screen functionality, including an image and a 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}

The value of these three items is very important, as described in the Help documentation: COLOR/MODALITY/FLAGS

A splash screen can is created with the Qt.splashscreen flag, and should is applicationmodal to prevent interaction W ith the main window. If The splash window is also transparent, and showing a partially transparent image, then it'll look like a shaped windo W.

That is, a splash screen must have a qt.splashscreen tag, and it must be a modal window (that is, the focus must remain on the splash screen window), which is the basic property of Splash. To improve the user experience, a picture (such as Photoshop) is typically displayed, and the gradient transparency is supported, so set the background color to transparent.

Window position and size

Because it is splash screen, it must be centered on the display. So width and height are equal to the displayed picture width and height respectively, 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, with the following description of screen:
The screen attached object provides information about the "an Item" or Window is displayed on.

The screen object defines height, width, and some other screen-related properties, all of which are read-only.

The picture shown

Displays the image component used by the picture, and the code is simple:

    Image {        id:splashimage        Source: ".. /shared/images/qt-logo.png "        mousearea {            anchors.fill:parent            onClicked:Qt.quit ()        }    }

Here alone analysis is because Mousearea's OnClicked event response function is: Qt.quit (), querying the document we know its purpose is to exit the app.
However, in the actual test, we found that when the splash window appears, the mouse click program does not exit, and the Debug window has the following error prompt:
Signal qqmlengine::quit () emitted, but no receivers connected to handle it.

Here specifically what to do to achieve the click of the time to exit the application, is not clear, leave a TODO.

Splash Screen's Hidden

From the design point of view, the role of Splash screen is to do some initialization before the main window, such as loading font library in Photoshop, brushes and so on, but in this example program, is a timer to simulate the Splash screen exit event.

    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

Where timeoutinterval defines the trigger interval for a timer, and the type of timeout is signal, which is a new type.

In the official documentation, the signal about how to add a custom is as follows:
signals can 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 the example, a timeout signal is defined, and the signal event is triggered by the timeout () method when a trigger is required.

The Signal event response function is defined by default according to the following specification:
Signal handlers-Signal take the syntax form on<property>changed where <Property> is the NA Me of the property, and the first letter capitalized.

So, the name of the SPLASH.QML signal event response function is OnTimeOut, which is also used in WINDOW.QML:

    Property var Splashwindow:splash {        onTimeout:controlWindow.visible = True    }

Therefore, the splash screen exit and the main window display are completed by the timer and signal.

Display and hide of window

At the end of the SPLASH.QML code there is this line:

    Component.onCompleted:visible = True

So is the window the default is hidden do not display, you need to manually make it display it? The answer is yes

Visible:bool
The holds whether the window is visible or not.
This property controls the visibility of the windows in the windowing system.
By default, the window isn't visible, you must call SetVisible (true), or show () or similar to make it visible.

As a result, the visible splash screen needs to be set to true in the component.oncompleted event response function, while the outside main window needs to be in the ontimeout of splash screens. the event response function is set to true.

Summarize

Knowledge points learned in this section:

1. How to create a custom splash screen based on window
2. How to get the parameters of screen and center the display of window to keep
3. How to use a custom signal and corresponding signal response function
4. Display and hide of window

In this chapter we learn a special example of window splash screen, which is used in a more common scenario, and can greatly improve the user experience by using splash screen during the startup process of the application.
However, in this chapter of the study, also left a pit, that is, how to exit the program directly in splash screen. For follow-up study ...

QT Demo window (2) Splash