Discussion :

[Zhitoune]

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 :

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
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 :

Sélectionner tout - Visualiser dans une fenêtre à part

Layout.fillWidth: true

rien ne change

si je supprime

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

anchors.fill: parents

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Layout.fillWidth: true

ne sert toujours à rien.

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
anchors.left: root.left
        anchors.right: root.right

aucun changement avec ou sans

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Zhitoune]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

ColumnLayout

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

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
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.!!!!!

[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.

[Jiyuu]

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

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
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

[Gojir4]

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

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
 
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.