Qt Quick Exemples - Fenêtre et écran

Les sections «Fenêtre » et « Écran » expliquent comment :

• créer une fenêtre en QML
• contrôler son visibility
• afficher un écran de démarrage au lancement de l'application
• accéder aux propriétés de la Screen

Il montre également comment intégrer du code QML dans des ressources et fournir une icône pour créer une application de bureau QML autonome.

Exécution de l'exemple

Vous pouvez exécuter l’exemple à partir de :

• Qt Creator

  Ouvrez le mode « Welcome » et sélectionnez l'exemple dans Examples. Pour plus d'informations, consultez Qt Creator: Tutoriel : Compiler et exécuter.

• Qt Extension for Visual Studio Code

  Exécutez la commande « Qt: Open Qt examples » à partir de Command Palette, puis sélectionnez l’exemple dans la liste. Pour plus d’informations, consultez Qt Extension for Visual Studio Code: Tutoriel : Compiler et exécuter.

Implémentation de la fenêtre

Un écran de démarrage peut être créé à l’aide de l’indicateur ` Qt.SplashScreen ` et doit être défini comme ` ApplicationModal ` pour empêcher toute interaction avec la fenêtre principale. Si la fenêtre de démarrage est également transparente et affiche une image partiellement transparente, elle ressemblera alors à une fenêtre de forme personnalisée.

Window {
    id: splash
    color: "transparent"
    title: "Splash Window"
    modality: Qt.ApplicationModal
    flags: Qt.SplashScreen
    property int timeoutInterval: 2000
    signal timeout

Dans cet exemple, un « Timer » fermera automatiquement l’écran de démarrage, mais dans une application réelle, vous souhaiterez peut-être vous connecter à un signal provenant de la logique de l’application pour masquer l’écran de démarrage une fois l’initialisation terminée.

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

La fenêtre principale de cet exemple est la fenêtre de contrôle, dotée de boutons et de cases à cocher permettant de contrôler et de fournir un retour d’information sur l’état d’une fenêtre secondaire. Chaque case à cocher dispose d’une liaison vers la propriété dont elle affiche l’état, ainsi que d’un gestionnaire onClicked permettant de modifier cet état. Il s’agit d’un modèle classique permettant de créer une liaison bidirectionnelle tout en évitant les boucles de liaison.

CheckBox {
    text: "Windowed"
    height: showButton.height
    width: col.cellWidth
    Binding on checked { value: root.testWindow.visibility === Window.Windowed }
    onClicked: root.testWindow.visibility = Window.Windowed
}

Screen dispose de plusieurs propriétés généralement utiles aux applications qui doivent faire pivoter certains contenus lorsque l’orientation de l’écran change, pour positionner des fenêtres à l’écran ou pour convertir des unités réelles en unités de pixels logiques. Le fichier CurrentScreen.qml (qui s’affiche en ligne dans window.qml ou peut être exécuté seul à l’aide de l’outil qml) se contente d’afficher les valeurs des propriétés, tandis que l’écran de démarrage les utilise pour centrer la fenêtre à l’écran.

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

Si une fenêtre de niveau supérieur ( Window ) est imbriquée à l’intérieur d’une fenêtre de niveau intermédiaire ( Item ) ou d’une autre fenêtre (Window), la fenêtre interne devient transitoire par rapport à la fenêtre externe (voir Window pour plus d’explications). Mais si vous souhaitez créer plusieurs fenêtres de niveau supérieur en tant qu’éléments équivalents sans lien entre eux, vous pouvez les créer à l’intérieur d’un élément racine non visuel ( QtObject ), comme le montre cet exemple.

Exemple de projet sur code.qt.io