Discussion :

[Avatar36]

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 :

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

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

[Amnell]

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 :

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

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

[Avatar36]

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

[Amnell]

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

[Avatar36]

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.

[Amnell]

D'accord, je vois.

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

Code :

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

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 :

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

x_recherche < x_ligne + width_ligne

D'où le code modifié :

Code :

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

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

[Avatar36]

Toujours la même erreur

[Amnell]

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 :

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

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 :

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

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

[Avatar36]

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 :

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

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

[Amnell]

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

Bon courage pour vos projets,
Louis