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
  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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 : 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
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