Disposer cinq rectangles de largeur spécifiée en pourcentage

Version imprimable

Bonjour à tous,

Je début avec QML, j'adore ça jusqu'ici :)

J'essaie de placer 5 rectangles un à la suite des autres sur une ligne. La hauteur de la largeur de cette ligne dépend de la taille de la fenêtre.
Au départ, la fenêtre à la taille suivante : 640x480. Cette taille est le MINIMUM autorisée, mais la fenêtre peu prendre de l'expension.

Information sur les rectangles

Rectangle 1
- Initialement sa largeur sera de 96 pixels.
- Initialement sa hauteur sera de 30 pixels.
- À mesure que la fenêtre augmentera de taille, la largeur et la hauteur du rectangle doit augmenter proportionnellement aussi.
Rectangle 2
- Initialement sa largeur sera de 96 pixels.
- Initialement sa hauteur sera de 30 pixels.
- À mesure que la fenêtre augmentera de taille, la largeur et la hauteur du rectangle doit augmenter proportionnellement aussi.
Rectangle 3
- Initialement sa largeur sera de 256 pixels.
- Initialement sa hauteur sera de 30 pixels.
- À mesure que la fenêtre augmentera de taille, la largeur et la hauteur du rectangle doit augmenter proportionnellement aussi.
Rectangle 4
- Initialement sa largeur sera de 96 pixels.
- Initialement sa hauteur sera de 30 pixels.
- À mesure que la fenêtre augmentera de taille, la largeur et la hauteur du rectangle doit augmenter proportionnellement aussi.
Rectangle 5
- Initialement sa largeur sera de 96 pixels.
- Initialement sa hauteur sera de 30 pixels.
- À mesure que la fenêtre augmentera de taille, la largeur et la hauteur du rectangle doit augmenter proportionnellement aussi.

Voici ce que j'avais jusqu'ici :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
 
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
 
ApplicationWindow {
    title: qsTr("Hello World")
    width: 640
    minimumWidth: 640
    height: 480
    minimumHeight: 480
    visible: true
    id : mainWindow
 
    property real multiplierRatioWidth : (mainWindow.width / mainWindow.minimumWidth)
    property real multiplierRatioHeight : (mainWindow.height / mainWindow.minimumHeight)
 
    function calculateRatioWidth(x) {
        return x * (multiplierRatioWidth > multiplierRatioHeight ? multiplierRatioWidth : multiplierRatioHeight);
    }
 
    function calculateRatioHeight(y) {
        return y * (multiplierRatioHeight > multiplierRatioWidth ? multiplierRatioHeight : multiplierRatioWidth);
    }
 
    Rectangle {
        id : rectangleBackground
        color : "#b4f7f7"
        anchors.fill: parent
 
        Item {
            height : calculateRatioHeight(30)
            width : parent.width
 
            Rectangle {
                id : rectangle1
                width : calculateRatioWidth(96)
                height : calculateRatioHeight(30)
                color : "#ff00ff"
                Text {
                    text : "rectangle1" // parent.id ???
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    anchors.fill: parent
                    font.pixelSize: calculateRatioHeight(12)
                }
            }
 
            Rectangle {
                id : rectangle2
                anchors.left: rectangle1.right
                width : calculateRatioWidth(96)
                height : calculateRatioHeight(30)
                color : "#ffff00"
 
                Text {
                    text : "rectangle2"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    anchors.fill: parent
                    font.pixelSize: calculateRatioHeight(12)
                }
            }
 
            Rectangle {
                id : rectangle3
                anchors.left: rectangle2.right
                width : calculateRatioWidth(256)
                height : calculateRatioHeight(30)
                color : "#ffffff"
 
                Text {
                    text : "rectangle3"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    anchors.fill: parent
                    font.pixelSize: calculateRatioHeight(12)
                }
 
            }
 
            Rectangle {
                id : rectangle4
                anchors.left: rectangle3.right
                width : calculateRatioWidth(96)
                height : calculateRatioHeight(30)
                color : "#0000ff"
 
                Text {
                    text : "rectangle4"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    anchors.fill: parent
                    font.pixelSize: calculateRatioHeight(12)
                }
            }
 
            Rectangle {
                id : rectangle5
                anchors.left: rectangle4.right
                width : calculateRatioWidth(96)
                height : calculateRatioHeight(30)
                color : "#00ff00"
 
                Text {
                    text : "rectangle5"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    anchors.fill: parent
                    font.pixelSize: calculateRatioHeight(12)
                }
            }
 
        }
    }
}

Jusqu'ici ça fonctionne super bien :)

Toutefois, j'aimerais avoir votre avis sur cette façon de faire, surtout savoir s'il y a moyens de faire plus simple avec les fonctionnalités built-in de QtQuick ? Grid, row, etc... ?

Aussi, pourquoi lorsqu'on resize la fenêtre avec la souris et la grip, le contenu n'est pas redessiné en même temps qu'on tire la souris. Le refresh se fait que lorsqu'on a termié de redimensionné la fenêtre. J'ai deux version de cet exemple, chez moi j'ai la version Qt 5.3 et ici 5.4 et c'est pas le même comportement.

Merci

02/03/2015, 20h12
Jiyuu

:salut:

As tu essayé avec des GridLayout et les attributs minimumHeight et minimumWidth ?

[EDIT]
Un peu de pub ne fait jamais de mal ;)

http://ceg.developpez.com/tutoriels/...faces-simples/

http://ceg.developpez.com/tutoriels/...on-qml-python/

Je parle aussi de Python, mais ça devrait t'aider un peu.

Bonne continuation.
02/03/2015, 22h24
Erakis

Merci pour votre réponse Jiyu.

Je cherche justement des tutoriaux pour les layout (row, col, grid, etc..), surtout les GridLayout. La VRAIE question, c'est est-ce qu'un GridLayout permet de préciser la taille de ces cellules en pourcentage/ratio ? Est-ce possible aussi de faire évoluer la talle de la police à l'intérieur de la cellule ? Important aussi de préciser aussi que les 5 rectangles doivent toujours rester sur une seul ligne, ils ne doivent tomber sur deux lignes.

Est-ce qu'une personne aimable pourrait m'indiquer comment faire avec un GridLayout ? Ou aurait une piste de départ. Je commence en QML et je suis un peu perdu dans les layout. Pour vous dire, quand je regarde ça j'ai l'impression que les row et col fonctionne à l'enver. Enfin bref...

Le but derrière ça c'est d'obtenir un UI qui s'agrandit (s'adapte) entre 640x480 et 1280x960. Donc les éléments, police, images, etc...

Si en fait tu n'as besoin que d'une ligne alors part plutôt sur un RowLayout :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import QtQuick 2.4
import QtQuick.Layouts 1.1
 
Rectangle {
    height : 480
    width : 640
    RowLayout {
        anchors.fill :parent
        Rectangle {
            color : "red"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.minimumWidth: 96
        }
        Rectangle {
            color : "blue"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.minimumWidth: 96
        }
        Rectangle {
            color : "green"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.minimumWidth: 256
        }
        Rectangle {
            color : "transparent"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.minimumWidth: 96
        }
        Rectangle {
            color : "yellow"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.minimumWidth: 96
        }
    }
}

Concernant les redimensionnements, d'après ce que j'ai pu en voir (je ne suis pas non plus un grand spécialiste) le redimensionnement est automatique et en fonction du contenu des items.
C'est à dire, par exemple, qu'un bouton avec un texte à 30 caractères sera forcément plus grand qu'un bouton avec un texte à 20 caractères.

Bonne continuation à toi.

02/03/2015, 23h22
Erakis
Merci beaucoup Jiyuu pour votre exemple, je vais tester ça :)

Toutefois, la taille de la police fait aussi parti de ma question, c'est-à-dire ; comment gérer la taille des polices en fonction de la taille du rectangle parent ? Si par exemple on intégrait un élément Text dans un des rectangles de votre exemple. Il faudrait lui préciser la taille de la police. Celle-ci devrait augmenter en taille selon la hauteur du rectangle et ce dernier étant directement lié à la hauteur de la fenêtre. Y-a-t-il un moyen automatique de faire ça ? J'imagine que de faire :
Code:

1 2 3 4 Text { font.pixelSize : parent.height * 0.50 ... }
pourrait fonctionner.

J'espère qu'il y a un PRO du responsive layout ici :roll:
02/03/2015, 23h32
Jiyuu

Je suis pas sur mon PC mais en théorie oui, ça devrait fonctionner.
Par contre il faudra se poser la question de ce qui arrive s'il n'y a que la hauteur de modifier.... il est probable que le texte dépasse en longueur.

Il existe peut être une autre façon de faire. À étudier ;-)