Introduction au style des QCheckBox avec Qt Style Sheets

La personnalisation de l'apparence des widgets Qt est facilitée grâce aux Feuilles de Style Qt (QSS), qui s'inspirent des CSS. Pour les QCheckBox, il est courant de vouloir ajuster non seulement les couleurs ou les bordures, mais aussi la taille de l'indicateur (la petite case à cocher elle-même). Cet article explore comment styliser et maîtriser les dimensions des indicateurs de QCheckBox.

Stylisation de base et états de l'indicateur QCheckBox

L'indicateur d'une QCheckBox peut être ciblé spécifiquement en QSS à l'aide du pseudo-élément ::indicator. Il est possible de définir des styles distincts pour les différents états (coché, non coché, survolé, désactivé, etc.). Voici un exemple illustrant comment appliquer des styles variés, y compris des dimensions, à un indicateur de QCheckBox.

QCheckBox {
    color: #e0e0e0; /* Couleur du texte du label */
    background-color: #3a3a3a; /* Couleur de fond du widget entier */
    padding: 5px;
    font-size: 14px;
}

QCheckBox::indicator {
    border-style: solid;
    border-width: 1px;
    border-radius: 3px; /* Coins légèrement arrondis */
    width: 20px; /* Taille par défaut de l'indicateur */
    height: 20px;
    margin-right: 5px; /* Espacement entre l'indicateur et le texte */
}

QCheckBox::indicator:unchecked {
    background-color: #5c5c5c;
    border-color: #7b7b7b;
}

QCheckBox::indicator:checked {
    background-color: #4CAF50; /* Vert pour coché */
    border-color: #388E3C;
    image: url(:/icons/checked_white.png); /* Icône personnalisée pour l'état coché */
}

QCheckBox::indicator:hover {
    border-color: #007ACC; /* Bordure bleue au survol */
}

QCheckBox::indicator:disabled {
    background-color: #888888;
    border-color: #aaaaaa;
    opacity: 0.7; /* Légèrement transparent quand désactivé */
}

QCheckBox::indicator:indeterminate {
    background-color: #FFC107; /* Jaune pour l'état indéterminé */
    border-color: #FFA000;
    image: url(:/icons/indeterminate_white.png); /* Icône personnalisée pour l'état indéterminé */
}

L'état indeterminate, ou semi-coché, est une fonctionnalité spécifique des QCheckBox qui doit être activée par programme. Sans cette activation, la QCheckBox n'aura que deux états : coché et non coché.

// Dans votre code C++ ou le constructeur d'un widget parent
myCheckBox->setTristate(true);

Défis liés au redimensionnement de l'indicateur par défaut

Bien que l'on puisse définir width et height directement sur QCheckBox::indicator, cette approche peut ne pas toujours fonctionner comme prévu pour l'icône par défaut du système d'exploitation. Le comportement peut varier selon la plateforme ou la version de Qt. L'utilisation de la propriété iconSize via la méthode C++ setIconSize() ou en QSS affecte généralement une icône associée *au widget global* (par exemple, placée à côté du texte de la case à cocher) et non l'indicateur de coche lui-même.

// Cet appel modifie la taille d'une icône optionnelle du widget, pas l'indicateur de coche.
// ui->myCheckBox->setIconSize(QSize(32, 32));

Solution fiable : Redimensionner l'indicateur avec des images personnalisées

Pour garantir un contrôle précis et cohérent de la taille de l'indicateur de QCheckBox, la méthode la plus robuste consiste à utiliser des images personnalisées pour chaque état. En fournissant des fichiers image de la taille exacte souhaitée, on contourne les limitations potentielles des icônes de système et on assure une apparence uniforme.

Assurez-vous que les images (par exemple, checked.png, unchecked.png, etc.) sont incluses dans vos ressources Qt (fichier .qrc) et que leurs chemins sont corrects.

/* Indicateur pour l'état non coché */
QCheckBox::indicator:unchecked {        
    image: url(:/assets/icons/checkbox_off_custom.png);
    width: 28px; /* Ces dimensions sont maintenant celles de l'espace occupé par l'image */
    height: 28px;
    background-color: transparent; /* Pas de fond derrière l'image */
    border: none; /* Pas de bordure si l'image en a déjà une */
}

/* Indicateur pour l'état coché */
QCheckBox::indicator:checked {
    image: url(:/assets/icons/checkbox_on_custom.png);
    width: 28px;
    height: 28px;
    background-color: transparent;
    border: none;
}

Avec cette méthode, la propriété image remplace l'icône de l'indicateur par défaut par votre propre graphique. Les propriétés width et height définissent alors l'espace alloué à cette image. Il est souvent préférable de définir les dimensions dans l'image elle-même ou d'ajuster l'image pour qu'elle corresponde aux dimensions souhaitées, puis d'utiliser width et height pour encadrer cette image correctement, ou de les omettre si l'image est censée remplir l'espace par défaut de l'indicateur.