Style Material

Le style Material s'inspire des directives de conception Material Design de Google. En savoir plus...

Propriétés associées

• accent: couleur
• fond: couleur
• élévation: int
• premier plan: couleur
• principal: couleur
• thème: énumération
• échelle arrondie: énumération
• style du conteneur: énumération

Méthodes associées

• color color(énumération prédéfinie, énumération nuance)

Description détaillée

Le style « Material » s'appuie sur les directives de Google Material Design. Il permet d'offrir une expérience homogène sur toutes les plateformes et tous les formats d'appareils.

Pour exécuter une application utilisant le style Material, consultez la section « Utilisation des styles » dans le guide « Qt Quick Controls ».

Personnalisation

Le style Material prend en charge plusieurs attributs personnalisables. Certains de ces attributs s propagate nt aux éléments enfants de la même manière que fonts:

• thème
• principal
• accent
• premier plan
• arrière-plan

Les autres attributs ne sont pas transmis aux éléments enfants :

• élévation
• échelle arrondie
• containerStyle

Dans l'exemple suivant, la fenêtre et les trois boutons radio s'affichent dans le thème sombre avec une couleur d'accent violette :

import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Material

ApplicationWindow {
    visible: true

    Material.theme: Material.Dark
    Material.accent: Material.Purple

    Column {
        anchors.centerIn: parent

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

Outre la spécification des attributs dans QML, il est également possible d'en définir certains via des variables d'environnement ou dans un fichier de configuration. Les attributs spécifiés dans QML ont priorité sur toutes les autres méthodes.

Fichier de configuration

Consultez le fichier de configuration «Qt Quick Controls » pour plus de détails sur ce fichier.

Variables d’environnement

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

Dépendance

Le style Material 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 Material, le même code d’application s’exécute avec n’importe quel autre style. Les attributs spécifiques à Material n’ont d’effet que lorsque l’application est exécutée avec le style Material.

Si le style « Material » est importé dans un fichier QML qui est toujours chargé, il doit être déployé avec l’application afin de pouvoir exécuter celle-ci 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 ce dernier.

Couleurs Material prédéfinies

Même si les couleurs « primaire » et « d'accent » peuvent être n'importe quelle color, il est recommandé d'utiliser l'une des couleurs prédéfinies, conçues pour s'harmoniser avec le reste de la palette du style Material :

Couleurs prédéfinies disponibles :

Lorsque le thème sombre est activé, différentes nuances des couleurs prédéfinies sont utilisées par défaut :

Nuances prédéfinies

Il existe plusieurs nuances différentes pour chaque couleur prédéfinie qui peuvent être transmises à la fonction Material.color():

Voir aussi Style de base, Style universel

Variantes

Le style « Material » propose également une variante « dense », dans laquelle les contrôles tels que les boutons et les délégués sont plus petits en hauteur et utilisent des tailles de police plus petites. Il est recommandé d’utiliser la variante « dense » sur les plateformes de bureau, où la souris et le clavier permettent une interaction utilisateur plus précise et plus flexible.

Pour utiliser la variante « dense », définissez la variable d’environnement « QT_QUICK_CONTROLS_MATERIAL_VARIANT » sur « Dense », ou spécifiez « Variant=Dense » dans le fichier « qtquickcontrols2.conf ». La valeur par défaut dans les deux cas est « Normal ».

Les images suivantes illustrent les différences entre certains contrôles selon que l’on utilise la variante normale ou la variante dense :

Notez que les hauteurs indiquées ci-dessus peuvent varier en fonction des différences de polices entre les différentes plateformes.

Remarques spécifiques aux contrôles

TextArea

TextArea prend en charge deux styles de conteneur: « Filled » et « Outlined ». Les TextAreas de type « Outlined » comportent un texte de remplacement flottant situé en haut du contrôle. Cela nécessite que le texte de remplacement dépasse les limites du contrôle, ce qui peut entraîner son rognage lorsque l’ TextArea ou le Flickable dont il est un enfant définit ` clip ` sur ` true`. Pour éviter cela, ` topInset ` est défini sur une valeur appropriée dans ces cas-là.

Conformément aux directives Material, le texte de remplacement doit être court et ne pas s’étendre sur plusieurs lignes.

TextField

Le même problème de rognage que celui expliqué ci-dessus pour TextArea peut également se produire avec TextField. Pour éviter cela, topInset est défini sur une valeur appropriée lorsque le TextField définit clip sur true.

Conformément aux directives relatives au contenu, le texte de remplacement doit être court et ne pas s'étendre sur plusieurs lignes.

Documentation sur les propriétés associées

Cette propriété associée contient la couleur d'accentuation du thème. Elle peut être associée à n'importe quelle fenêtre ou à n'importe quel élément. Sa valeur est transmise aux éléments enfants.

La valeur par défaut est Material.Pink.

Dans l'exemple suivant, la couleur d'accentuation du bouton mis en évidence est remplacée par Material.Orange:

Button {
    text: qsTr("Button")
    highlighted: true
    Material.accent: Material.Orange
}

Cette propriété associée contient la couleur d’arrière-plan du thème. Elle peut être associée à n’importe quelle fenêtre ou à n’importe quel élément. La valeur est transmise aux éléments enfants.

La valeur par défaut dépend du thème (clair ou foncé).

Dans l'exemple suivant, la couleur d'arrière-plan du bouton est remplacée par « Material.Teal » :

Button {
    text: qsTr("Button")
    highlighted: true
    Material.background: Material.Teal
}

Cette propriété associée contient la valeur d'élévation du contrôle. Plus la valeur d'élévation est élevée, plus l'ombre est profonde. Cette propriété peut être associée à n'importe quel contrôle, mais tous les contrôles ne permettent pas de visualiser l'élévation. La valeur n'est pas transmise aux éléments enfants.

La valeur par défaut dépend du contrôle.

Dans l'exemple suivant, l'élévation du volet est définie sur « 6 » afin de donner l'apparence d'une carte en relief:

Pane {
    width: 120
    height: 120

    Material.elevation: 6

    Label {
        text: qsTr("I'm a card!")
        anchors.centerIn: parent
    }
}

Cette propriété associée contient la couleur de premier plan du thème. Elle peut être associée à n'importe quelle fenêtre ou à n'importe quel élément. Sa valeur est transmise aux éléments enfants.

La valeur par défaut dépend du thème (clair ou foncé).

Dans l'exemple suivant, la couleur de premier plan du bouton est définie sur « Material.Pink » :

Button {
    text: qsTr("Button")
    Material.foreground: Material.Pink
}

Cette propriété associée contient la couleur principale du thème. Elle peut être associée à n'importe quelle fenêtre ou à n'importe quel élément. Sa valeur est transmise aux éléments enfants.

La couleur principale est utilisée par défaut comme couleur d’arrière-plan de ToolBar.

La valeur par défaut est Material.Indigo.

Cette propriété attachée indique si le thème est clair ou foncé. Elle peut être associée à n'importe quelle fenêtre ou à n'importe quel élément. La valeur est répercutée sur les éléments enfants.

Thèmes disponibles :

Si vous définissez le thème sur « System », le thème clair ou foncé est choisi en fonction des couleurs du thème système. Cependant, lorsque vous lisez la valeur de la propriété « theme », celle-ci n’est jamais « System », mais correspond au thème réel.

Dans l'exemple suivant, le thème du volet et du bouton est défini sur « Material.Dark » :

Pane {
    Material.theme: Material.Dark

    Button {
        text: qsTr("Button")
    }
}

Cette propriété attachée contient le rayon des coins arrondis utilisés sur le contrôle cible. La propriété peut être attachée à n'importe quelle fenêtre ou à n'importe quel élément, mais seuls certains contrôles la prennent en charge. La valeur n'est pas propagée aux éléments enfants.

La valeur par défaut dépend du contrôle.

Échelles disponibles :

Cette propriété a été ajoutée dans Qt 6.5.

Voir aussi : Style Material : Forme.

Cette propriété associée contient le style du conteneur utilisé par le contrôle cible. Elle peut être associée à n’importe quelle fenêtre ou à n’importe quel élément, mais seuls TextField et TextArea la prennent en charge par défaut. La valeur n’est pas propagée aux éléments enfants.

La valeur par défaut dépend du contrôle.

Styles disponibles :

Cette propriété a été ajoutée dans Qt 6.5.

Voir aussi : Style « Material » : conteneurs de champs de texte.

Documentation des méthodes associées

Cette méthode associée renvoie la valeur de couleur effective de la couleur de matériau prédéfinie spécifiée, combinée à la nuance indiquée. Si cet argument est omis, la nuance prend par défaut la valeur « Material.Shade500 ».

Rectangle {
    color: Material.color(Material.Red)
}

Informations connexes

• Mise en forme Qt Quick Controls