Dispositions de base

Version imprimable

Bonjour à tous,

je débute en qml et pour me familiariser avec le langage, je fais des petites applications mais je rencontre des problèmes sur une choses qui me semblait simple : les layouts

Voici l'application suivante où je veux disposer sur une lignes 2 boutons espacé d'un slider.
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 import QtQuick 2.7 import QtQuick.Window 2.2 import QtQuick.Layouts 1.1 import QtQuick.Controls 2.1 Window { id: root visible: true title: qsTr("Plotter v0.1") RowLayout{ id:cLayout anchors.fill: parent Button { id: traceB text: "Plot" } Slider { id: mySlider from: 0 to: 255 value: 51 } Button { id: lastButton text: "erase" } } }
je cherche à réaliser deux choses : un que les composants soient réparties sur toutes la largeur de la fenêtre et ce même si la fenêtre est redimensionnée.
ce code produit sur mon ordi un résultats imparfait: les composants se répartissent bien sur une longueur, au fur et à mesure que j’agrandis la fenêtre horizontalement. mais quand le bouton de gauche reste collé à la bordure de la fenêtre celui de droite en est séparée par une marge (non spécifié) qui dépends de la taille de la fenêtre!?
et en ajoutant :

Code:

Layout.fillWidth: true

rien ne change

si je supprime

Code:

anchors.fill: parents

du RowLayout, tous les composant se trouve empilé à gauche et ce quelque soit la taille de la fenêtre. rajouter

Code:

Layout.fillWidth: true

ne sert toujours à rien.

j'en ai compris que le layout avait un dimension à lui du coup j'ai tenté :
Code:

1 2 anchors.left: root.left anchors.right: root.right
aucun changement avec ou sans

Code:

Layout.fillWidth: true

, les composants son tassés à gauche de la fenêtre.
et là j'ai plus vraiment d'idée! qu'est ce que je fais mal?

petite question subsidiaire, comment je fais pour que la taille de la fenêtre initiale ai une relation avec ses composants?

merci d'avance

J'ai finalement trouvé la propriété qui brisait la symétrie de répartition des composants.il s'agit de

Code:

Layout.alignement: Qt.AlignRight

une fois l'alignement spécifiée, j'ai obtenu l'interface voulue : une ligne de composant réparties sur toute la largeur de l'interface.
pour compliquer un peu les choses j'ai rajouté un

Code:

ColumnLayout

encapsulant le RowLayout et rajouté un slider collé au bas de l'interface et occupant toute sa largeur :

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
import QtQuick 2.7
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.1
import QtCharts 2.1
 
Item {
    id: rootI
    width: 1000
    height: 600
    ColumnLayout {
        id: cLayout
        anchors.fill: parent
        RowLayout {
            id:rLayout
            anchors.fill: parent
            Button {
                id: traceB
                text: "Plot"
            }
            Slider {
                id: topSlider
                from: 0
                to: 255
                value: 51
                Layout.alignment: Qt.AlignHCenter
            }
            Button {
                id: lastButton
                text: "erase"
                Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
            }
        }
        Slider {
            anchors.bottom: cLayout.bottom
            id:bottomSlider
            from: 0
            to: 800
            value: 666
            Layout.fillWidth: true
        }
    }
}

et là je perds c que j'avais réussi à faire : les composants du RowLayout s'agencent de nouveau à gauche de l'interface et ne bougent plus. Je n'ai absolument rien modifié au code mais "l'interpretation" est complétement différente.!!!!!:weird::weird:

19/05/2017, 13h49
Zhitoune

Bon apparemment, les objets layout doivent toujours avoir pour parent un objet graphique. la solution consiste donc soit à encapsuler le Layout dans un Rectangle ou alors d'utilisé un gridLayout.

:salut:

Ce n'est pas ça que tu veux faire :

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
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
 
ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
 
    ColumnLayout {
        anchors.fill: parent
        RowLayout {
            Layout.fillWidth: true
 
            Button {
                Layout.fillWidth: true
                text: "Btn 1"
            }
 
            Slider {
                Layout.fillWidth: true
            }
 
            Button {
                Layout.fillWidth: true
                text: "Btn 2"
            }
        }
        Slider {
            Layout.fillHeight: true
        }
    }
}

Bye

Dans un ColumnLayout, RowLayout ou GridLayout, il faut toujours utiliser les propriétés partagées et jamais les "ancres" anchors.xxx
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Layout.minimumWidth Layout.minimumHeight Layout.preferredWidth Layout.preferredHeight Layout.maximumWidth Layout.maximumHeight Layout.fillWidth Layout.fillHeight Layout.alignment Layout.margins Layout.leftMargin Layout.rightMargin Layout.topMargin Layout.bottomMargin
source: http://doc.qt.io/qt-5/qml-qtquick-la...umnlayout.html

En utilisant ces propriétés il est tout-à-fais possible d'inclure un Layout dans un autre Layout. Comme l'illustre l'exemple de Jiyuu.
Je vous conseille vivement de regarder les exemples fourni par Qt pour bien comprendre ce mécanisme de layout QML. C'est un peu différent du système de layout pour les widgets.