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 :
Jusqu'ici ça fonctionne super bien
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) } } } } }
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
Partager