Bonjour à tous et à toutes.
Dans le cadre de mon travail, j'étudie la possibilité d'utiliser des thèmes grâce à des fichier de styles (css).
Déjà, partout, il faut utiliser un fichier qrc qui nous embarque toutes les ressources dans l'exécutable. Très bien, rapide à l'exécution, mais si on veut laisser le choix à l'utilisateur d'ajouter un style par la suite, on est mort car tout est dans l'exe !
Après de longues recherches, j'ai trouvé une solution :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13 /* Fichier CSS pour Theme 1 */ QPushButton#PushButtonStyled { font-weight: bold; color: rgb(200, 200, 200); background-image: url(:/Theme1/Btn5757); width: 57px; height: 57px; min-width: 57px; min-height: 57px; max-width: 57px; max-height: 57px; }Le thème 1 est dans le qrc :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13 /* Fichier CSS pour Theme 2 */ QPushButton#PushButtonStyled { font-weight: bold; color: rgb(200, 200, 200); background-image: url(Theme2:/Btn5758.png); width: 57px; height: 57px; min-width: 57px; min-height: 57px; max-width: 57px; max-height: 57px; }
Dans le main, il suffit d'ajouter le Theme2 dans searchPath du QDir et d'utiliser partout Theme2:/nom_de_ma_ressource.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8 <RCC> <qresource prefix="/Theme1"> <file alias="Application.css">Resources/Theme1/Application.css</file> <file alias="Btn5757">Resources/Theme1/Btn5757.png</file> <file alias="Btn5757Off">Resources/Theme1/Btn5757Off.png</file> <file alias="Btn5757On">Resources/Theme1/Btn5757On.png</file> </qresource> </RCC>
Le thème2 est alors uniquement sur le disque et ne fait pas parti du qrc (d'ailleurs les liens vers les images dans les deux css sont écrit différemment).
Ce code fonctionne parfaitement.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7 QDir::addSearchPath("Theme2",QString("%1/%2").arg(qApp->applicationDirPath()).arg("Resources/Theme2")); // QFile styleFile("Theme2:/Application.css"); QFile styleFile(QString(":/Theme1/Application.css")); if (styleFile.open(QIODevice::ReadOnly | QIODevice::Text)) { qApp->setStyleSheet(QString::fromUtf8(styleFile.readAll())); }
Il suffit de mettre en commentaire le chargement du css du thème 1 ou deux pour que cela fonctionne.
Voilà, je donne ça comme ça, au cas où ce n'est pas la bonne façon de faire... S'il y a des solutions plus élégantes !!
Passons aux choses sérieuses : le problème c'est que l'application peut-être lancée sur plusieurs type de machines ayant des résolutions différentes...
Et donc un PPI (pixel per inch) différent. Le but ? Définir la taille d'un bouton de tel sorte qu'il ai toujours la même taille quelque soit la résolution et la taille de l'écran. Pourquoi ?
Notre application est tactile et il faut au moins une certaine taille pour que les boutons et autres widgets soient utilisable avec les doigts.
J'ai remarqué dans les exemples de Qt (C:\Qt\4.8.4\examples\widgets\stylesheet) que le fichier coffee.qss défini un QPushButton comme ceci :
Or, je ne trouve nulle part comment est défini ce ex (pour min-width et min-height). A quoi ex correspond-il ?
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12 /* We provide a min-width and min-height for push buttons so that they look elegant regardless of the width of the text. */ QPushButton { background-color: palegoldenrod; border-width: 2px; border-color: darkkhaki; border-style: solid; border-radius: 5; padding: 3px; min-width: 9ex; min-height: 2.5ex; }
Y-a-t-il un moyen de travailler en ppi ?
Une des solutions est de mettre ppi dans le fichier css et à la relecture de le parser et de faire des calculs en fonction du ppi courant, mais ça m'étonnerais que Qt n'ai pas prévu ce type de problème.
Vous avez une idée ?
Partager