Développer une barre QML et un panneau à partir de zéro avec Quickshell

Résumé : Il est montré pas à pas comment écrire une barre supérieure de style Omarchy avec Quickshell : la structure de répertoires divisée en modules sous ~/.config/quickshell/, le shell.qml qui définit la couche d'écran, le Workspaces.qml qui affiche les espaces de travail Hyprland sous forme de boutons cliquables, et les transitions douces avec les blocs Behavior on.

Lorsque vous souhaitez développer une barre supérieure (panneau) personnelle dans un environnement Wayland, deux options se présentaient traditionnellement : des panneaux basés sur GTK limités à des fichiers de configuration statiques, ou des solutions JavaScript excessivement lourdes exécutant un moteur de navigateur. Quickshell relie la structure déclarative puissante de QML directement aux protocoles Wayland, réunissant le meilleur des deux mondes.

Dans cet article, nous allons examiner pas à pas comment construire, à l'aide de Quickshell, une barre supérieure légère, modulaire et dotée d'animations fluides, dans le style d'Omarchy.

1. Structure des répertoires et configuration de base

Les configurations de Quickshell se trouvent par défaut dans le répertoire ~/.config/quickshell/. Pour une architecture propre, la meilleure approche consiste à diviser les composants en modules :

~/.config/quickshell/
├── shell.qml               # Ana giriş noktası
├── components/
│   ├── Workspaces.qml      # Çalışma alanları modülü
│   ├── WindowTitle.qml     # Aktif pencere başlığı
│   └── SystemTray.qml      # Sistem tepsisi ve göstergeler
└── theme/
    └── Theme.qml           # Global renk ve tipografi tanımları

2. Le shell principal : shell.qml

Le fichier shell.qml définit la couche d'écran et les dimensions du cadre principal :

import QtQuick 2.15
import QtQuick.Layouts 1.15
import Quickshell 1.0
import Quickshell.Wayland 1.0
import "components"
import "theme"

Scope {
    PanelWindow {
        id: bar
        
        anchors {
            top: true
            left: true
            right: true
        }
        height: 36
        
        WlrLayershell.layer: WlrLayer.Top
        WlrLayershell.exclusiveZone: 36
        
        color: Theme.background
        
        RowLayout {
            anchors.fill: parent
            anchors.leftMargin: 12
            anchors.rightMargin: 12
            spacing: 8
            
            // Sol: Çalışma Alanları
            Workspaces {
                Layout.alignment: Qt.AlignLeft
            }
            
            // Orta: Aktif Pencere
            WindowTitle {
                Layout.fillWidth: true
                Layout.alignment: Qt.AlignCenter
            }
            
            // Sağ: Sistem Durumu
            SystemTray {
                Layout.alignment: Qt.AlignRight
            }
        }
    }
}

3. Indicateur d'espaces de travail : Workspaces.qml

Lister les espaces de travail Hyprland sous forme de boutons dynamiques et les rendre cliquables à la souris est assez simple :

import QtQuick 2.15
import QtQuick.Layouts 1.15
import Quickshell.Hyprland 1.0
import "../theme"

RowLayout {
    spacing: 4
    
    Repeater {
        model: 5
        
        Rectangle {
            id: wsButton
            property int wsId: index + 1
            property bool isActive: Hyprland.activeWorkspace.id === wsId
            
            width: 24
            height: 24
            radius: 4
            color: isActive ? Theme.accent : Theme.surface
            border.color: isActive ? Theme.accent : Theme.border
            
            Text {
                anchors.centerIn: parent
                text: wsId
                font.family: "JetBrains Mono"
                font.pixelSize: 11
                font.bold: isActive
                color: isActive ? Theme.background : Theme.textMuted
            }
            
            MouseArea {
                anchors.fill: parent
                cursorShape: Qt.PointingHandCursor
                onClicked: Hyprland.dispatch("workspace " + wsId)
            }
            
            Behavior on color {
                ColorAnimation { duration: 120 }
            }
        }
    }
}

4. Transitions fluides et effets de survol

Le plus grand avantage de QML est qu'il offre une interpolation basée sur la physique et accélérée par le matériel, au-delà des animations CSS. Par exemple, le léger éclat d'un bouton au survol de la souris se règle en une seule ligne avec les blocs Behavior on ....

Les composants développés avec Quickshell n'étant pas dessinés comme des fenêtres indépendantes, mais sur une seule surface au niveau du GPU, aucune saccade d'image ne se produit.

Ma lecture

• Séparer les composants en modules facilite la maintenance : chaque partie réside dans son propre fichier QML.
• L'animation est au cœur de QML : avec Behavior on, les transitions s'écrivent sans bibliothèque supplémentaire.
• Le dessin sur une seule surface assure la fluidité : les composants ne sont pas des fenêtres séparées, mais sont dessinés sur la même surface GPU.