Disposition et dimension d'une image

Version imprimable

Bonjour,

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

1 2 3 4 5 Image { height: 50; width: 100 source: "images/flags/french.png" }
alors que celui ci non :
Code:

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

04/08/2014, 23h16
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
05/08/2014, 18h25
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 ?
05/08/2014, 19h11
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:

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
05/08/2014, 21h07
franchouze

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

Merci beaucoup !
05/08/2014, 22h51
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.
05/08/2014, 23h19
franchouze

Merci pour le lien. Je regarde ça !

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:

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