Discussion :

[franchouze]

Bonjour,

Pourriez vous m'expliquer pourquoi ce code permet d'avoir une dimension demandée d'image :

Code :

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

1
2
3
4
5
 
Image {
         height: 50; width: 100
        source: "images/flags/french.png"
    }

alors que celui ci non :

Code :

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

1
2
3
4
5
6
7
8
 
 
GridLayout {
    Image {
         height: 50; width: 100
        source: "images/flags/french.png"
    }
}

Merci pour votre aide.
François

[Amnell]

Bonjour,

Le principe des layouts est d'adapter leur contenu aux dimensions prises par le layout, d'où la distinction entre les deux. Si vous utilisez le type Grid et non le type GridLayout, par exemple, vous n'aurez pas de redimensionnement de vos éléments graphiques et obtiendrez deux résultats identiques. Un petit détail pas forcément pertinent par rapport à votre question : si vous ne spécifiez pas la longueur et la largeur de votre image hors d'un layout, le composant prendra la taille de l'image chargée.

Bonne soirée,
Louis

[franchouze]

Merci pour votre réponse.

Si je comprends bien votre réponse, si je veut garder un GridLayout, il faut que je modifie la taille du layout complet (et donc des cellules du layout) afin d'obtenir la taille désirée pour mon image ?

J'ai effectué ce test pour afficher une page de paramètres avec différentes informations (nom d'utilisateur, mot de passe etc...) Je voulais justement utilisé un GridLayout pour essayer de gérer les différences d'affichage entre différentes résolution d'écran. Est-ce vraiment nécessaire où est-ce qu'un Grid est suffisant ?

[Amnell]

Bonsoir,

Je vous avouerai qu'étant quelqu'un qui code en QML depuis la version 1.0, je n'ai pas vraiment pris le temps de me renseigner sur les layouts sur le point de vue de QML, je passe plutôt par les anchors pour gérer mes affichages. Lorsque je code des formulaires, j'utilise un composant Column avec un spacing donné dans lequel je positionne des champs (généralement des Item, contenant par exemple un Text, le label - d'une longueur fixe -, et un LineEdit - ancré de la droite du label à la droite du parent -, un composant que j'ai écrit à partir de TextInput et d'un Rectangle pour avoir le design qui me plait). Cependant, avec les dernières versions, j'imagine que la solution d'un GridLayout doit proposer des moyens bien plus intéressants et plus simples.

Dans le cadre de votre utilisation, vous semblez souhaiter que votre composant Image ne soit pas redimensionné à l'intérieur de votre layout. Avez-vous considéré ce code-ci ?

Code :

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

1
2
3
4
5
6
Item {
    Image {
        anchors.centerIn: parent
        source: "images/flags/french.png"
    }
}

De là, si vous souhaitez limiter la taille d'une colonne ou ce genre de chose, il y a pas mal de propriétés dans le type de base Layout qui spécifient ça.

Bonne soirée à vous,
Louis

[franchouze]

Effectivement, mettre l'image dans un Item permet de fixer sa dimension dans le Gridlayout.

Merci beaucoup !

[arnolddumas]

Si ça peut être utile, j'avais traduit un article qui présentait les layouts en QML : http://qt-digia.developpez.com/tutor...-quick/layouts.

[franchouze]

Merci pour le lien. Je regarde ça !

[franchouze]

J'ai trouvé une solution plus adapté au GridLayout qui me permet sur une même ligne d'avoir un label à gauche et un élément à droite.

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
 
 GridLayout {
        id: grid
        opacity: 0.99
        columns: 4
        rows: 10
 
        //autre éléments non détaillés....
 
        Label{id: flagLabel; text: "Flag :";  Layout.columnSpan: grid.columns-1;  Layout.fillWidth: true; Layout.preferredWidth: Layout.maximumWidth;  }
        Image {
            Layout.maximumHeight: 50;
            Layout.preferredWidth: 100;
            fillMode: Image.PreserveAspectFit
            Layout.alignment: Qt.AlignRight
            Layout.fillWidth: false;
            Layout.fillHeight: false;
            source: "images/flags/french.png"
        }
 
      }

Merci à tous pour vos réponses