QML Material constitue une suite de composants QML destinés à QtQuick, respectant les directives de Material Design établies par Google. Cette solution fonctionne indifféremment sur Linux, macOS et Windows. Les équipes de Papyros en assurent le développement et la maintenance.

Méthodes d'installation

Via QPM (Qt Package Manager)

Après configuration de QPM, l'installation s'efffectue par cette instruction :

qpm install io.papyros.material

Pour intégrer la police Roboto directement dans votre build, ajoutez cette directive avant l'inclusion du fichier vendor.pri :

OPTIONS += roboto

Via Git submodule et QMake

Commencez par référencer le dépôt comme sous-module :

git submodule add git@github.com:papyros/qml-material.git material

Puis intégrez le fichier .pri correspondant dans votre système de compilation (CMake, QMake ou QBS).

Configuration du moteur QML

Le code C++ suivant prépare l'environnement d'exécution pour charger les modules Material :

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QUrl>
#include <material/vendor.h>

int main(int nbArgs, char **listeArgs)
{
    QGuiApplication app(nbArgs, listeArgs);
    
    QQmlApplicationEngine moteur;
    
    // Macro d'initialisation du gestionnaire de paquets
    add_definitions("-DQPM_INIT(E)=E addImportPath(QStringLiteral(\"qrc:/\"))");
    include(material.vendor.cmake);
    
    QPM_INIT(moteur);
    
    moteur.load(QUrl(QStringLiteral("qrc:/main.qml")));
    
    return app.exec();
}

Cette séquence rend disponible l'espace de noms Material 0.3 dans vos fichiers QML.

Utilisation dans les fichiers QML

L'exemple ci-après démontre l'application d'une palette chromatique et de propriétés visuelles Material :

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

ApplicationWindow {
    id: fenetrePrincipale
    visible: true
    width: 800
    height: 600
    
    Material.theme: Material.Dark
    Material.accent: Material.Teal
    
    Rectangle {
        anchors.fill: parent
        color: Material.background
        
        BoutonPersonnalise {
            id: actionPrincipale
            texteAffiche: "Valider"
            couleurFond: Material.accent
            couleurTexte: Material.foreground
            taillePolice: 18
            ancres.centreIn: parent
        }
    }
}

Composant personnalisé : bouton stylisé

Pour illustrer la création de composants réutilisables avec cette bibliothèque :

// BoutonPersonnalise.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Material 2.15

Button {
    property string texteAffiche: ""
    property color couleurFond: Material.primary
    property color couleurTexte: "white"
    property int taillePolice: 14
    
    text: texteAffiche
    font.pixelSize: taillePolice
    
    background: Rectangle {
        implicitWidth: 160
        implicitHeight: 48
        color: parent.pressed ? Qt.darker(couleurFond, 1.2) : couleurFond
        radius: 4
        
        layer.enabled: parent.hovered
        layer.effect: DropShadow {
            verticalOffset: 2
            radius: 8
            samples: 16
            color: "#40000000"
        }
    }
    
    contentItem: Text {
        text: parent.text
        font: parent.font
        color: couleurTexte
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
    }
}

Thématisation dynamique

Voici comment basculer entre thèmes clair et sombre à l'exécution :

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

Item {
    id: conteneurTheme
    
    property bool modeSombre: false
    
    function basculerTheme() {
        modeSombre = !modeSombre;
        Material.theme = modeSombre ? Material.Dark : Material.Light;
    }
    
    Rectangle {
        id: indicateurVisuel
        width: 200
        height: 200
        anchors.centerIn: parent
        color: Material.background
        border.color: Material.divider
        
        Text {
            id: libelleEtat
            text: modeSombre ? "Mode nuit activé" : "Mode jour activé"
            color: Material.foreground
            anchors.centerIn: parent
        }
        
        MouseArea {
            anchors.fill: parent
            onClicked: conteneurTheme.basculerTheme()
        }
    }
}

Applications concrètes

Cette bibliothèque s'applique particulièrement bien dans les contextes suivants :

• Interfaces de contrôle industriel : tableaux de bord avec indicateurs visuels cohérents et lisibles
• Logiciels de bureautique : suites d'outils nécessitant une navigation intuitive par onglets et panneaux latéraux
• Kiosques interactifs : écrans tactiles publics avec contraste élevé et retour haptique visuel
• Applications médicales : interfaces exigeant clarté et réduction des erreurs de manipulation

Points d'attention

L'évolution des versions de QtQuick et de Material Design peut entraîner des modifications d'API. Il est recommandé de consulter la documentation officielle du projet pour les détails les plus récents concernant les propriétés disponibles et les signatures de fonctions.