Style matériel

Le style Material est basé sur les lignes directrices de Google en matière de conception matérielle. Plus...

Propriétés attachées

• accent: couleur
• background: couleur
• elevation: int
• premier plan: couleur
• primary: couleur
• theme: énumération
• roundedScale: énumération
• containerStyle: énumération

Méthodes attachées

• color color(enumeration predefined, enumeration shade)

Description détaillée

Le style Material est basé sur les directives de conception Material de Google. Il permet une expérience unifiée sur toutes les plateformes et toutes les tailles d'appareils.

Pour exécuter une application avec le style Material, voir Utilisation des styles dans les contrôles Qt Quick .

Personnalisation

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

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

Les autres attributs ne se propagent pas aux enfants :

• élévation
• roundedScale
• containerStyle

Dans l'exemple suivant, la fenêtre et les trois boutons radio apparaissent dans le thème sombre avec une couleur d'accentuation 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 en QML, il est également possible de spécifier certains d'entre eux via des variables d'environnement ou dans un fichier de configuration. Les attributs spécifiés en QML ont la priorité sur toutes les autres méthodes.

Fichier de configuration

Voir Qt Quick Fichier de configuration des contrôles pour plus de détails sur le fichier de configuration.

Variables d'environnement

Voir Variables d'environnement prises en charge dans Qt Quick Controls pour la liste complète des variables d'environnement prises en charge.

Dépendance

Le style Matériel doit être importé séparément pour avoir accès aux attributs spécifiques au style Matériel. Il convient de noter qu'indépendamment des 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 au style 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é, le style Material 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.

Couleurs matérielles prédéfinies

Même si les couleurs primaires et les couleurs d'accentuation peuvent être n'importe lesquelles color, il est recommandé d'utiliser l'une des couleurs prédéfinies qui ont été conçues pour s'harmoniser avec le reste de la palette de styles Material :

Couleurs prédéfinies disponibles :

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

Teintes prédéfinies

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

Voir aussi Style de base, Style universel

Variantes

Le style "Matériel" prend également en charge 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 plus précise et plus souple avec l'utilisateur.

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

Les images suivantes illustrent les différences entre certains contrôles lors de l'utilisation des variantes normale et dense :

Notez que les hauteurs indiquées ci-dessus peuvent varier en fonction des différences de polices de caractères entre les plates-formes.

Notes spécifiques aux contrôles

Zone de texte

TextArea prend en charge deux styles de conteneur: Filled et Outlined. Les TextAreas soulignées ont un texte de remplacement flottant qui se trouve en haut du contrôle. Le texte de l'espace réservé doit donc sortir des limites du contrôle, ce qui peut entraîner un écrêtage lorsque TextArea ou le Flickable dont il est l'enfant définit clip sur true. Pour éviter cela, topInset est défini sur une valeur appropriée dans ces cas.

Conformément aux lignes directrices sur les matériaux, le texte des espaces réservés doit être court et ne pas occuper plusieurs lignes.

Champ de texte

Le même problème d'écrêtage expliqué ci-dessus pour TextArea peut également se produire avec TextField. Pour éviter ce problème, topInset est réglé sur une valeur appropriée lorsque TextField règle l'écrêtage sur true.

Conformément aux directives sur les matériaux, le texte de remplacement doit être court et ne pas occuper plusieurs lignes.

Documentation jointe sur les propriétés

Cette propriété jointe contient la couleur d'accentuation du thème. La propriété peut être attachée à n'importe quelle fenêtre ou élément. La valeur est propagée aux enfants.

La valeur par défaut est Material.Pink.

Dans l'exemple suivant, la couleur d'accentuation du bouton en surbrillance est modifiée en Material.Orange:

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

Cette propriété jointe contient la couleur d'arrière-plan du thème. La propriété peut être attachée à n'importe quelle fenêtre ou élément. La valeur est propagée aux enfants.

La valeur par défaut est spécifique au thème (light ou dark).

Dans l'exemple suivant, la couleur d'arrière-plan du bouton est modifiée en Material.Teal:

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

Cette propriété jointe indique l'élévation du contrôle. Plus l'élévation est importante, plus l'ombre est profonde. La propriété peut être attachée à n'importe quel contrôle, mais tous les contrôles ne visualisent pas l'élévation. La valeur n'est pas transmise aux enfants.

La valeur par défaut est spécifique au contrôle.

Dans l'exemple suivant, l'élévation du volet est fixée à 6 afin d'obtenir l'aspect d'une carte surélevée:

Pane {
    width: 120
    height: 120

    Material.elevation: 6

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

Cette propriété jointe contient la couleur d'avant-plan du thème. La propriété peut être attachée à n'importe quelle fenêtre ou élément. La valeur est propagée aux enfants.

La valeur par défaut est spécifique au thème (light ou dark).

Dans l'exemple suivant, la couleur d'avant-plan du bouton est fixée à Material.Pink:

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

Cette propriété jointe contient la couleur primaire du thème. La propriété peut être attachée à n'importe quelle fenêtre ou élément. La valeur est propagée aux enfants.

La couleur primaire 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é jointe indique si le thème est clair ou foncé. La propriété peut être attachée à n'importe quelle fenêtre ou élément. La valeur est propagée aux enfants.

Thèmes disponibles :

En attribuant la valeur System au thème, on choisit le thème clair ou foncé en fonction des couleurs du thème du système. Cependant, lors de la lecture de la valeur de la propriété theme, la valeur n'est jamais System, mais le 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é jointe contient le rayon des coins arrondis utilisés sur le contrôle cible. Cette propriété peut être attachée à n'importe quelle fenêtre ou élément, mais seuls certains contrôles la prennent en charge. La valeur n'est pas transmise aux enfants.

La valeur par défaut est spécifique au contrôle.

Échelles disponibles :

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

Voir aussi : Style de matériau : Forme.

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

La valeur par défaut est spécifique au contrôle.

Styles disponibles :

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

Voir aussi : Style de matériau : Conteneurs de champs de texte.

Documentation sur la méthode attachée

Cette méthode annexe renvoie la valeur effective de la couleur matérielle prédéfinie spécifiée, combinée à la nuance donnée. S'il est omis, l'argument de la nuance prend par défaut la valeur Material.Shade500.

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

Informations connexes

• Stylisation des contrôles Qt Quick