Discussion :

[petitclem]

Bonjour,

J'utilise la méthode setStyleSheet pour personnaliser les widgets de mon application mais là je suis confronté à un petit soucis : je n'arrive pas à faire en sorte que les angles de ma fenêtre soient arrondis !

Dans le constructeur de ma fenetre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinimizeButtonHint);
setStyleSheet("background-color: black; border-radius: 5px;");
setWindowOpacity(0.85);
setWindowTitle("test");
setFocus();

Avec ce code, ma fenêtre a un fond noir transparent mais les angles restent droits !
Ma fenêtre hérite de QWidget mais quand je fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

setStyleSheet("QWidget{background-color: black; border-radius: 5px;}");

Le bouton situé dans ma fenêtre a les angles arrondis mais pas ceux de ma fenêtre.

Comment puis je faire pour y arriver ?

Merci d'avance, à bientôt !

[GreatTux]

Pas sûr à 100%, mais essaye de voir ce que ça donne en ajoutant à ton qss:
"border-style: solid; border-width: 1px;"

[petitclem]

Salut GreatTux,

je viens d'essayer ta solution mais sans succès !

[GreatTux]

Re,

Je pense que ça peut être une limitation due au fait que ton widget n'a pas de parent (c'est une fenêtre).
Essaye de lui coller l'attribut suivant, ça lui ajoutera un canal d'alpha, donc permettra de rendre les coins transparents, càd arrondis;

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

setAttribute(Qt::WA_TranslucentBackground);

[petitclem]

Bonjour,

Je viens d'essayer comme ceci mais rien n'y change !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinimizeButtonHint);
setAttribute(Qt::WA_TranslucentBackground);
setStyleSheet("QWidget{background-color: black; border-style: solid; border-width: 1px; border-radius: 5px;}");
setWindowOpacity(0.85);
setFocus();

le fond de ma fenêtre est transparent et tous les widgets à l'intérieur ont leurs angles arrondis alors que je souhaiterai que seule la fenêtre est ses angles arrondis !!!

[GreatTux]

Ok j'ai réussi de mon coté.

J'ai créé une classe d'UI toute bête qui dérive de QWidget.
Je ne sais pas si tu passes par un .ui, dans mon cas oui mais ça ne change rien. Dans ce .ui, j'ajoute un QWidget "widget".

Voici le code du constructeur:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
ui->setupUi(this);
setWindowFlags(Qt::FramelessWindowHint);
setAttribute(Qt::WA_TranslucentBackground);
ui->widget->setStyleSheet("background-color: black; border-radius: 5px;");
setWindowOpacity(0.85);
setFocus();

Note que c'est bien au QWidget "widget" que le style est appliqué.

Concernant ton problème d'angles arrondis sur tes autres éléments la raison est simple: "Cascading Style Sheets". Ce qui signifie que tous les enfants du widget auquel tu appliques le style en hérite.
Dans ton cas plusieurs solutions à ça. Soit tu tu utiles la syntaxe:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
.QWidget
{
...
}

Le style sera alors appliqué strictement aux objets de type QWidget et pas à ceux qui en hérite (ex QPushButton).
Soit tu utilises la syntaxe:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
#widget
{
...
}

Le style ne sera alors appliqué qu'à l'objet "widget"

[petitclem]

Merci pour ta réponse GreatTux,

J'apporte quelques précisions sur ma classe : le nom est FenPrincipale et elle dérive de QWidget. Je n'utilise pas de .ui.

Content que ça fonctionne chez toi mais je ne sais pas comment adapter ce que tu as fait chez moi.

Mon constructeur est fait comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
FenPrincipale::FenPrincipale(QString Login, QString Mdp, QString Ent, QString NumSerie, QWidget *parent) :
    QWidget(parent)
{
// La Fenêtre
    setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinimizeButtonHint);    
    setStyleSheet("QWidget{background-color: black; border-radius: 5px;}");
    setWindowOpacity(0.85);    
    setFocus();
...

Merci, à bientôt !

[Troudhyl]

En gros tu ne peux pas le faire sur ta fenêtre mais sur un widget juste en-dessous (fenêtre transparente).

[petitclem]

Salut Troudhyl,

en gros c'est ça !

Je voudrais appliquer les angles arrondis seulement à ma fenêtre mais rien n'y fait, ce sont les boutons et autres widgets à l'intérieur qui prennent
le stylesheet !!!

[Troudhyl]

Un seul, le widget conteneur (juste sous la fenêtre, sans marge), ça suffit. C'est tout ce que tu dois ajouter, le reste GreatTux a bien résumé donc si tu as lu, tu sais au moins comment éviter que ce soient "les boutons et autres widgets à l'intérieur qui prennent le stylesheet".

[petitclem]

Bonjour et merci à tous,

Ca a peut être l'air simple pour vous mais je n'ai rien compris, désolé !

J'ai compris que mon problème venait d'un "Cascading Style Sheets" mais je n'ai pas compris comment le résoudre malgré les explications de GreatTux.

J'ai essayé comme ceci sur ma fenêtre mais rien ne change :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
setStyleSheet("QWidget{background-color: black; border-radius: 5px;}");

Et par exemple, pour mon bouton :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
buttonMenu = new QPushButton(this);
buttonMenu->setText("");
buttonMenu->setFixedSize(15,23);
buttonMenu->setStyleSheet("QPushButton {background-color: grey;}");

Tout ce que j'ai essayé n'a pas fonctionné : ma fenêtre ne prend pas le stylesheet mais les enfants oui !!!

[Troudhyl]

Je ne sais pas combien de fois il va falloir te le dire mais il faut que tu fasses/écrives/codes un widget conteneur, qui va représenter le fond de ta fenêtre, qui a pour parent ta fenêtre directement donc, et sur lui tu pourras mettre le style que tu veux. Quant à ta fenêtre, elle reste complètement transparente.
Pourquoi, parce que comme tu le constates toi-même, tu ne peux apparemment pas directement styliser la fenêtre comme tu le souhaites.

Concernant la propagation du style, GreatTux t'a expliqué, mais tu n'appliques pas. Soit tu désignes l'object avec l'objectName (comme l'ID en HTML) avec #objet, soit tu désignes la classe avec le . (.QWidget) pour éviter la propagation par héritage cette fois (et non par cascading). Mieux vaut faire par ID.

Voici le code que tu devrais pondre tout seul si tu as compris :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
FenPrincipale::FenPrincipale(QString Login, QString Mdp, QString Ent, QString NumSerie, QWidget *parent) :
    QWidget(parent)
{
// La Fenêtre
    setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinimizeButtonHint);
    setAttribute(Qt::WA_TranslucentBackground);
 
    QWidget* mainWidget = new QWidget ( this );
    setLayout ( new QVBoxLayout );
    layout()->setContentsMargins ( 0, 0, 0, 0 );
    layout()->addWidget(mainWidget);
 
    setStyleSheet("#mainWidget {background-color: black; border-radius: 5px;}");

(pas testé)