Style Imagine

Le style Imagine repose sur des ressources graphiques configurables. En savoir plus...

Propriétés associées

• path: chaîne de caractères

Description détaillée

Le style « Imagine » repose sur des ressources graphiques. Il est fourni avec un ensemble d’images par défaut, mais celles-ci peuvent être facilement remplacées en indiquant un répertoire contenant des images respectant une convention de nommage prédéfinie.

Le style Imagine avec les images par défaut

Pour exécuter une application avec le style Imagine, consultez la section « Utilisation des styles » sur Qt Quick Controls.

Noms de fichiers

Les fichiers image sont nommés selon la convention suivante :

<control>-<element>-<states>

Les sections « <control> » et « <element> » sont obligatoires, mais la section « <states> » est facultative. Par exemple, si un seul fichier nommé « "button-background.9.png" » est fourni pour « Button », il sera utilisé pour tous les états pris en charge par « Button ». C'est au développeur de décider pour quels états il fournira des images. Il est toutefois recommandé de fournir, dans la mesure du possible, des images pour les états de contrôle les plus courants, tels que disabled, pressed, etc. Cela garantira que les contrôles interactifs se comportent visuellement comme l'utilisateur final s'y attend.

Référence des éléments

Le tableau suivant répertorie les éléments pris en charge pour chaque contrôle, ainsi que les états possibles pour cet élément et l'extension de fichier attendue. Un élément est une image qui représente une partie visuelle spécifique du contrôle. Par exemple, l'élément « "background" » de Button représente son « background ».

Exemples de ressources

Le tableau suivant répertorie des exemples de ressources (tirées des ressources par défaut du style Imagine) pour tous les contrôles. Cette liste n’est pas exhaustive, car tous les éléments ne nécessitent pas forcément de ressources, mais elle peut servir de guide lors de la création de vos propres ressources.

Le modèle à partir duquel ces ressources ont été exportées est disponible sous forme de projet Sketch.

¹ Une image 1x1 contenant une seule couleur, étirée pour remplir le contrôle.

Images 9-Patch

Le style « Imagine » utilise des images 9-patch afin de permettre aux concepteurs de contrôler la manière dont un élément particulier réagit au redimensionnement. Voici un exemple d’image 9-patch représentant la page background d’un site Button, accompagnée d’une version agrandie (pour mieux voir les lignes du 9-patch) :

Le contenu de l’image mesure 44 pixels de large sur 32 pixels de haut. Chaque image 9-patch doit comporter une ligne d’un pixel d’épaisseur (collectivement appelées « lignes 9-patch ») autour de chaque côté, ce qui porte la taille réelle de l’image à 46 pixels de large sur 34 pixels de haut. Notez que les lignes 9-patch doivent avoir une épaisseur d’un pixel, quelle que soit la résolution (DPI) cible de l’image. Par exemple, les lignes 9-patch des fichiers « button-background.9.png » et « button-background@2x.9.png » doivent toutes deux avoir une épaisseur d’un pixel.

Les lignes 9-patch doivent être noires, et les zones restantes doivent être transparentes ou blanches :

Zones extensibles

Les lignes du 9-patch situées sur les bords supérieur et gauche déterminent quelles parties de l'image sont étirées lors du redimensionnement.

Vous trouverez ci-dessous des exemples d'image « 9-patch » redimensionnée à une fois et demie sa taille d'origine dans différentes dimensions :

Remarquez que les coins arrondis conservent leur taille d'origine, car ils se trouvent en dehors de la zone délimitée par les lignes.

Zones de remplissage

Les lignes du 9-patch situées sur les bords droit et inférieur déterminent l'espace disponible pour l'contentItem du contrôle, ce qui signifie qu'elles peuvent également être considérées comme contrôlant l'padding. Pour un schéma illustrant le padding, consultez Control Layout.

Vous trouverez ci-dessous d'autres exemples de redimensionnement de l'image « 9-patch », mais cette fois-ci illustrant le fonctionnement des lignes de remplissage « 9-patch ».

L’« contentItem » peut occuper autant d’espace que nécessaire à l’intérieur des zones ombrées. Si les lignes de remplissage sont omises, l’« contentItem » occupera autant d’espace que nécessaire sans dépasser les zones extensibles.

Zones d’encart

Dans certains cas, il est nécessaire qu’un contrôle comporte une ombre portée, par exemple. Cependant, si nous devions ajouter une ombre portée au bouton ci-dessus, cela affecterait sa taille, ce qui poserait des problèmes tant au niveau de la mise en page que des limites de saisie par souris ou par toucher.

Les zones d'encart permettent de pallier ce problème en indiquant au contrôle qu'une certaine partie de l'image 9-patch doit se trouver en dehors du contrôle :

Sur l’image ci-dessous, la ligne pointillée représente la zone cliquable du bouton, ainsi que l’espace qu’il occupera dans une mise en page. L’ombre est indiquée par la zone rayée située derrière lui :

Exportation d’images 9-patch

Divers éditeurs vectoriels et bitmap peuvent être utilisés pour créer des images 9-patch adaptées au style Imagine. Les sections suivantes expliquent brièvement le processus d'exportation pour chaque éditeur, et la dernière section explique comment s'assurer que les images exportées sont conformes au format 9-patch.

Affinity Designer

Consultez la documentation d'Affinity consacrée aux paramètres d'exportation.

Adobe Illustrator

Consultez la documentation d'Adobe sur le panneau « Exportation des ressources ».

Adobe Photoshop

Consultez la documentation d'Adobe intitulée « Générer des ressources d'image à partir de calques ».

Inkscape

L'extension « Inkscape 9-Patch Export » permet d'exporter des ressources à partir d'Inkscape.

Sketch

Consultez la documentation de Sketch sur l'exportation.

Qt Quick Controls fournit également un plugin pour Sketch qui corrige automatiquement l’épaisseur des lignes 9-patch après l’exportation des ressources. Pour installer ce fichier, double-cliquez dessus. Une fois que Sketch a confirmé que le plugin d’exportation 9-patch a été installé, celui-ci traitera automatiquement les images lors de leur exportation.

Correction des lignes 9-patch

Lors de l’exportation d’images 9-patch dans plusieurs variantes de DPI (@2x, @3x, etc.), les lignes 9-patch sont généralement agrandies en même temps que l’image. Il existe plusieurs façons de remédier à ce problème, mais l’approche la plus simple consiste sans doute à utiliser l’outil `mogrify` d’ImageMagick. Cet outil dispose d’une fonction « -shave » qui permet de recadrer l’image afin de réduire l’épaisseur des lignes 9-patch :

mogrify -shave 1x1 -path path/to/images *@2x.9.png
mogrify -shave 2x2 -path path/to/images *@3x.9.png
mogrify -shave 3x3 -path path/to/images *@4x.9.png

Les images à DPI standard (celles sans le préfixe « @Nx ») ne sont pas concernées ; il suffit donc d’exécuter la commande sur les images destinées aux écrans à haute résolution.

Images animées

Les formats d'images animées WebP et GIF sont pris en charge par le style Imagine.

Personnalisation

Chemin d'accès

Le style Imagine permet de personnaliser le chemin d'accès utilisé pour la sélection des ressources d'image. Le chemin d'accès peut être spécifié pour n'importe quelle fenêtre ou n'importe quel élément, et il est automatiquement répercuté sur les éléments enfants, de la même manière que fonts. Dans l'exemple suivant, la fenêtre et les trois boutons radio s'affichent avec des ressources d'images sombres (fichiers situés dans « qrc:/themes/dark »).

import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Imagine

ApplicationWindow {
    visible: true

    Imagine.path: "qrc:/themes/dark"

    Column {
        anchors.centerIn: parent

        RadioButton { text: qsTr("Small") }
        RadioButton { text: qsTr("Medium"); checked: true }
        RadioButton { text: qsTr("Large") }
    }
}

Outre la spécification du chemin d’accès en QML, il est également possible de le définir via une variable d’environnement ou dans un fichier de configuration. Les attributs spécifiés en QML ont priorité sur toutes les autres méthodes.

Fichier de configuration

[Imagine]
Path=:/imagine-assets

[Imagine]
Path=imagine-assets

Consultez la section « Fichier de configurationQt Quick Controls » pour plus de détails sur ce fichier.

Variables d'environnement

QT_QUICK_CONTROLS_IMAGINE_PATH=:/imagine-assets

QT_QUICK_CONTROLS_IMAGINE_PATH=imagine-assets

Consultez la section « Variables d’environnement prises en charge » dans Qt Quick Controls pour obtenir la liste complète des variables d’environnement prises en charge.

Palette

Le style Imagine prend en charge la personnalisation de la palette via la propriété palette et le fichier qtquickcontrols2.conf. Comme pour les autres styles, les « palette roles s » exactes utilisées par le style Imagine dépendent du style. Cependant, comme la plupart des aspects visuels des contrôles (par exemple : les arrière-plans) sont gérés via des ressources d’images, seuls les rôles généralement utilisés pour le texte auront un effet.

Police

Les polices personnalisées peuvent être définies via la propriété ` font ` et le fichier de configuration.

Dépendance

Le style Imagine doit être importé séparément pour pouvoir accéder aux attributs qui lui sont spécifiques. Il convient de noter que, quelles que soient les références au style Imagine, le même code d’application s’exécute avec n’importe quel autre style. Les attributs spécifiques à Imagine n’ont d’effet que lorsque l’application est exécutée avec le style Imagine.

Si le style Imagine est importé dans un fichier QML qui est toujours chargé, il doit être déployé avec l’application afin de pouvoir exécuter cette dernière quel que soit le style utilisé. L’utilisation de sélecteurs de fichiers permet d’appliquer des ajustements spécifiques à un style sans créer de dépendance stricte vis-à-vis de celui-ci.

Voir aussi: Mise en forme Qt Quick Controls

Documentation sur les propriétés associées

Cette propriété associée contient le chemin d'accès aux ressources image...

Button {
    Imagine.path: "qrc:/themes/dark"
}

Informations connexes

• Mise en forme Qt Quick Controls
• Exemple dans le secteur automobile