Style Imagine

Le style Imagine est basé sur des images configurables. Plus d'informations...

Propriétés attachées

• path: chaîne de caractères

Description détaillée

Le style Imagine est basé sur des images. Le style est livré avec un ensemble d'images par défaut, mais les images peuvent être facilement modifiées en fournissant un répertoire d'images utilisant 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, voir Utilisation des styles dans les contrôles Qt Quick .

Noms de fichiers

Les fichiers d'images 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 chaque État pris en charge par Button. Il appartient au développeur de décider de l'ensemble des états pour lesquels il fournira des images. Toutefois, il est recommandé de fournir des images pour les états de contrôle les plus courants, tels que disabled, pressed, etc. Cela garantit que les contrôles interactifs se comportent visuellement comme l'utilisateur final s'y attend.

Référence de l'élément

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 certaine partie visuelle du contrôle. Par exemple, l'élément "background" de Button représente son élément background.

Exemples d'actifs

Le tableau suivant présente des exemples d'éléments (tirés des éléments par défaut du style Imagine) pour tous les contrôles. La liste n'est pas exhaustive, car tous les éléments n'ont pas besoin d'assets, mais elle peut servir de guide lors de la création de vos propres assets.

Le modèle à partir duquel ces éléments ont été exportés est disponible en tant que projet Sketch.

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

Images 9-Patch

Le style Imagine utilise des images en 9 parties pour permettre aux concepteurs de contrôler la façon dont un élément particulier réagit au redimensionnement. Voici un exemple d'image en 9 points représentant une page Button's background, ainsi qu'une version agrandie (pour mieux voir les lignes en 9 points) :

Le contenu de l'image a une largeur de 44 pixels et une hauteur de 32 pixels. Chaque image 9-patch doit être entourée d'une ligne d'un pixel d'épaisseur (collectivement appelée "lignes 9-patch"), de sorte que la taille réelle de l'image est de 46 pixels de large sur 34 pixels de haut. Notez que les lignes de 9 patchs doivent avoir une épaisseur d'un pixel, quel que soit le DPI cible de l'image. Par exemple, les lignes de 9 patchs pour button-background.9.png et button-background@2x.9.png doivent toutes deux avoir une épaisseur d'un pixel.

Les lignes de 9 patchs doivent être noires et les autres zones doivent être transparentes ou blanches :

Zones extensibles

Les lignes de 9 hachures situées sur les bords supérieur et gauche déterminent les parties de l'image qui seront étirées lors d'un redimensionnement.

Vous trouverez ci-dessous des exemples de redimensionnement de l'image 9-patch à 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 des lignes.

Zones de remplissage

Les lignes de 9 points sur les bords droit et inférieur déterminent l'espace disponible pour le contrôle contentItem, ce qui signifie qu'il peut également être considéré comme contrôlant le padding. Pour un diagramme illustrant le remplissage, voir Control Layout.

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

Le site contentItem peut prendre toute la place dont il a besoin dans les zones ombrées. Si les lignes de remplissage sont supprimées, l'image contentItem prendra toute la place dont elle a besoin sans dépasser les zones extensibles.

Zones d'insertion

Dans certains cas, il est nécessaire qu'un contrôle ait une ombre portée, par exemple. Toutefois, si nous devions ajouter une ombre portée au bouton ci-dessus, cela affecterait sa taille, ce qui pose des problèmes à la fois pour la mise en page et pour les limites d'entrée de la souris/du toucher.

Les zones d'insertion permettent de résoudre ce problème en indiquant au contrôle qu'une certaine zone de l'image 9-patch doit se trouver à l'extérieur du contrôle :

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

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 à 9-patch.

Affinity Designer

Voir la documentation sur les paramètres d'exportation d' Affinity.

Adobe Illustrator

Voir la documentation sur le panneau d'exportation des actifs d' Adobe.

Adobe Photoshop

Voir la documentation d'Adobe sur la génération d'images à partir de calques.

Inkscape

L'extension d'exportation Inkscape 9-Patch peut être utilisée pour exporter des ressources avec Inkscape.

Esquisse

Voir la documentation sur l 'exportation de Sketch.

Qt Quick Controls fournit également un plugin pour Sketch qui corrige automatiquement l'épaisseur des lignes de 9 patchs 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é, le plugin traitera automatiquement les images lors de leur exportation.

Correction des lignes 9-patch

Lors de l'exportation d'images 9-patch dans plusieurs variantes DPI (@2x, @3x, etc.), les lignes 9-patch seront généralement mises à l'échelle avec l'image. Il existe plusieurs façons de résoudre ce problème, mais l'approche la plus simple consiste peut-être à utiliser l'outil mogrify d'ImageMagick. L'outil dispose d'une fonction -shave qui peut être utilisée pour 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 normales (celles sans le préfixe @Nx ) ne sont pas affectées, il n'est donc nécessaire d'exécuter la commande que sur les images destinées à des écrans DPI élevés.

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 utilisé pour la sélection des images. Le chemin peut être spécifié pour n'importe quelle fenêtre ou élément, et il se propage automatiquement aux enfants de la même manière que fonts. Dans l'exemple suivant, la fenêtre et les trois boutons radio apparaissent avec des 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 spécifier via une variable d'environnement ou dans un fichier de configuration. Les attributs spécifiés en QML sont prioritaires sur toutes les autres méthodes.

Fichier de configuration

[Imagine]
Path=:/imagine-assets

[Imagine]
Path=imagine-assets

Voir Qt Quick Controls Configuration File pour plus de détails sur le fichier de configuration.

Variables d'environnement

QT_QUICK_CONTROLS_IMAGINE_PATH=:/imagine-assets

QT_QUICK_CONTROLS_IMAGINE_PATH=imagine-assets

Voir Variables d'environnement prises en charge dans Qt Quick Controls pour 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 exacts utilisés par le style Imagine dépendent du style. Cependant, comme la plupart de l'apparence visuelle des contrôles (par exemple : les arrière-plans) sont gérés par des images, seuls les rôles qui sont typiquement 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 avoir accès aux attributs qui lui sont spécifiques. Il convient de noter qu'indépendamment des 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é, le style Imagine doit être déployé avec l'application afin de pouvoir exécuter l'application quel que soit le style avec lequel elle est exécutée. L'utilisation de sélecteurs de fichiers permet d'apporter des modifications spécifiques à un style sans créer de dépendance absolue à l'égard d'un style.

Voir aussi Styling Qt Quick Controls

Documentation sur les propriétés attachées

Cette propriété jointe contient le chemin d'accès à l'image...

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

Informations connexes

• Styliser les commandes Qt Quick
• Exemple pour l'automobile