Unexpected token pour un if

Bonjour,

J'essaye de créer une condition sur les ancres d'un élément QML afin de gérer le redimensionnement. Cependant, j'obtiens systématiquement les erreurs "Unexpected token if" et "Expected a qualified name id" et mon if est souligné en rouge. J'ai vu des exemples sur internet qui fonctionnent avec des syntaxes similaires mais pourquoi pas chez moi???? Voila le bout de code qui va pas, c'est pour placer une barre de recherche:
Code:

1 2 3 4 5 6 7 8 9 10 11 Recherche{id:zoneRecherche anchors.verticalCenter: parent.verticalCenter if(x<ligne.right){ anchors.left:ligne.right anchors.leftMargin:10 }else { anchors.right:parent.right anchors.rightMargin:10 } }
Le but est que si la barre de recherche n’empiète pas sur les boutons, on la colle à 10 pixels du bord droit, sinon on la colle à 10 pixels de la gauche. Ligne est un élément contenant les boutons du menu. Séparément j'arrive à coller la barre à droite ou à gauche mais ça marche pas avec le if.

Cordialement

Bonjour,

La description d'un composant QML ne s'effectue que par une association propriété: valeur ou propriété: expression. Par conséquent, votre if doit être placé différemment. Voici ce que je vous propose :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 Recherche { id: zoneRecherche property bool alignLeft: x < line.x + line.width // line.right est une ancre, par conséquent, j'imagine que vous parlez du bord droit ? - le nom de la propriété n'est pas forcément le meilleur anchors { verticalCenter: parent.verticalCenter left: alignLeft ? line.right : undefined // undefined permet de dire que l'ancre n'est pas reliée : on relie ainsi uniquement si nécessaire leftMargin: alignLeft ? 10 : 0 right: alignLeft ? undefined : parent.right rightMargin: alignLeft ? 0 : 10 } }
En général, il vaut mieux limiter les if/else dans les expressions QML pour des raisons de performances, d'où l'utilisation de conditions ternaires et la déclaration d'une propriété pour limiter la redondance.
Est-ce que cela donne le résultat que vous souhaitez ?

Bonne journée,
Louis

J'ai maintenant une erreur qui indique: Binding loop detected for property "alignleft". :/

Re,

Ah, effectivement vu que le fait de changer l'alignement va changer la position x de l'élément, menant à réévaluer l'expression et à tourner en rond.
Est-ce que je peux vous demander un schéma très simple de votre architecture de sorte de voir un peu plus précisément comment changer l'expression ?

Bonne journée,
Louis

En schématisant:

{ [bouton] [bouton] [bouton] [recherche] }

En gros ça ressemble à ça. Il y a un rectangle noir( les accolades) en arrière plan. Dedans, il y a un objet Row qui contient les trois boutons. La zone de recherche est centrée verticalement dans le rectangle.
Dans cette configuration, je souhaitais que la zone de recherche soit collée à droite sauf quand la fenêtre est trop petite auquel cas elle vient se coller à côté des boutons pour ne pas se superposer à eux.

D'accord, je vois.

Pour le fait que la recherche soit centrée, cela va donner ceci :

Code:

x_recherche = width_parent / 2 - width_recherche / 2

Si jamais x_recherche empiète sur les boutons, cela sous-entend que l'expression suivante est vraie :

Code:

x_recherche < x_ligne + width_ligne

D'où le code modifié :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 Recherche { id: zoneRecherche property bool alignLeft: parent.width / 2 - width / 2 < line.x + line.width anchors { verticalCenter: parent.verticalCenter left: alignLeft ? line.right : undefined // undefined permet de dire que l'ancre n'est pas reliée : on relie ainsi uniquement si nécessaire leftMargin: alignLeft ? 10 : 0 right: alignLeft ? undefined : parent.right rightMargin: alignLeft ? 0 : 10 } }
Est-ce fonctionnel ?

Bonne journée,
Louis

Toujours la même erreur :(

Effectivement, en testant, on remarque que l'item s'étire parce que l'actualisation n'est pas simultanée (une ancre s'ajoute avant que l'ancienne ne soit retirée, donc si c'était aligné à gauche, un ajout d'une ancre à droite va étirer l'élément avant que l'ancre gauche soit retirée), ce qui mène à actualiser l'expression de alignLeft vu que la propriété width change. On ne peut donc pas changer d'ancre gauche/droite aussi simplement. Je vous propose ainsi une autre solution avec un alignement gauche de la ligne mais avec une marge qui change :
Code:

1 2 3 4 5 6 7 8 9 10 11 Recherche { id: zoneRecherche property bool alignLeft: parent.width / 2 - width / 2 < line.x + line.width anchors { verticalCenter: parent.verticalCenter left: line.right leftMargin: alignLeft ? 10 : parent.width - line.width - width - 10 } }
En théorie, ça devrait régler votre problème. L'alternative en passant par les ancres est de faire ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 Recherche { id: zoneRecherche property bool alignLeft: parent.width / 2 - width / 2 < line.x + line.width anchors { verticalCenter: parent.verticalCenter left: line.right leftMargin: 10 rightMargin: 10 } onAlignLeftChanged: { if (alignLeft) { anchors.right = undefined; anchors.left = line.right; } else { anchors.left = undefined; anchors.right = parent.right; } } }
L'ordre des assignations avec d'abord l'ancienne ancre à undefined puis la nouvelle à la nouvelle ancre est important, sinon cela fait revenir au problème initial de changement de taille et ainsi de binding loop. En terme d'optimisation, je pense que la deuxième solution est meilleure, vu qu'elle implique moins de calculs.

Bonne journée,
Louis

Re,

J'ai légèrement modifié ton dernier code. En fait on s'était mal compris sur le centrage et j'ai donc légèrement modifié la propriété alignLeft:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
Recherche {
            id: zoneRecherche
 
            property bool alignLeft: parent.width < ligne.x + ligne.width + width +20
 
            anchors {
                verticalCenter: parent.verticalCenter
                left: ligne.right
                leftMargin: 10
                rightMargin: 10
 
            }
 
            onAlignLeftChanged: {
                if (alignLeft) {
                    anchors.right = undefined;
                    anchors.left = ligne.right;
                    anchors.leftMargin = 10;
                } else {
                    anchors.left = undefined;
                    anchors.right = parent.right;
                    anchors.rightMargin=10;
                }
            }
        }

Comme ça, ça fait exactement ce que je veux. MERCI :D

Certes, désolé, j'avais oublié la marge dans l'expression (et d'autres trucs en fait ?). :aie:

Bon courage pour vos projets,
Louis