GridLayout dans ScrollView

Version imprimable

2 pièce(s) jointe(s)

:salut: à tous,

J'ai besoin de disposer plusieurs items dans un scrollview. Pour me simplifier la vie je pense à utiliser un GridLayout. Malheureusement je ne parviens pas à obtenir un résultat correct.

Voici un exemple de mon code :
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 import QtQuick 2.2 import QtQuick.Layouts 1.1 import QtQuick.Controls 1.1 //GroupBox{ //title: qsTr("Rapport d'intervention") ScrollView{ //anchors.fill: parent GridLayout { id: gridInter width : parent.width height: parent.height columns: 3 Label{ text : "Points de contrôles" Layout.fillWidth : true } Label{ text : "Conformité" Layout.fillWidth : true } Label{ text : "Commentaires" Layout.fillWidth : true } //} } }
Vous constaterez la présence d'un GroupBox. Dans le projet, mon scrollview est dans un cet item. J'ai fait plusieurs tests en commentant - décommentant certaines lignes, mais rien n'y fait. Je joins deux screens de ce que j'obtiens.
Pièce jointe 138434
Pièce jointe 138435

Quelqu'un aurait une piste ?

D'avance merci.

J

Salut,
Pour qu'un ScrollView fonctionne, la taille de son contenu doit être déterminée pour savoir quoi "scroller".

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
import QtQuick 2.2
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.1
 
GroupBox {
    title: qsTr("Rapport d'intervention")
    ScrollView {
        GridLayout {
            id: gridInter
            width: 260
            height: 210
            columns: 3
            Label{
                text : "Points de contrôles"
                Layout.fillWidth : true
            }
            Label{
                text : "Conformité"
                Layout.fillWidth : true
            }
            Label{
                text : "Commentaires"
                Layout.fillWidth : true
            }
        }
    }
}

22/02/2014, 11h07
Jiyuu

:salut:

Ça fonction nikel. Je comprends pas pourquoi je suis passé à coté de ça.

Merci à toi.

:salut:

Je déterre ce sujet car je reprends le projet sur lequel j'étais à l'époque.
Pour faire simple :

dans un GridLayout je dispose x items. En fonction de la taille de la fenêtre les items sont redimensionné correctement.
si la fenêtre atteint est trop redimensionnée vers le "bas" (c'est à dire trop petite), j'aimerai pouvoir scroller celle-ci afin d'avoir un rendu correct et de maintenir une taille de mes items cohérentes.

Je ne parviens pas à trouver un moyen simple de faire ceci. Actuellement j'en suis à ça :

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
import QtQuick 2.2
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.1
 
 
Rectangle {
 
    Component.onCompleted: scroll.contentItem = contener
 
 
    function scrollChange(){
        if ((width > 600) && (height > 600)){
            scroll.contentItem = itemNull
            contener.width = width
            contener.height = height
        }
        else{
            scroll.contentItem = contener
        }
    }
 
    function widthChange(){
        if (width > 600){
            scroll.contentItem = itemNull
            contener.width = width
        }
        if (width < 600){
            scroll.contentItem = contener
        }
    }
 
    function heightChange(){
        if (height > 600){
            scroll.contentItem = itemNull
            contener.height = height
        }
        if (height < 600){
            scroll.contentItem = contener
        }
    }
 
    onWidthChanged: scrollChange()
    onHeightChanged: scrollChange()
 
    ScrollView {
        id : scroll
        anchors.fill : parent
    }
 
    Item{id :itemNull}
 
    Rectangle {
        id: contener
        width : 600
        height: 600
        GridLayout {
            id: grid
            columns: 3
            anchors.fill :contener
            Rectangle { color : "blue" ; Layout.fillHeight: true ; Layout.fillWidth: true }
            Rectangle { color : "green"  ; Layout.fillHeight: true ; Layout.fillWidth: true}
            Rectangle { color : "red"  ; Layout.fillHeight: true ; Layout.fillWidth: true}
            Rectangle { color : "yellow"  ; Layout.fillHeight: true ; Layout.fillWidth: true}
            Rectangle { color : "black"  ; Layout.fillHeight: true ; Layout.fillWidth: true}
            Rectangle { color : "brown"  ; Layout.fillHeight: true ; Layout.fillWidth: true}
        }
    }
}

Quelqu'un aurait une piste ou une astuce pour faire ce que je veux, car là le rendu est pas top-top.

Bonne soirée à tous.

J

Salut,
Comme cela :

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
import QtQuick 2.2
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.1
 
 
Rectangle {
	Component.onCompleted: scroll.contentItem = contener
 
	function scrollChange(){
                if ((width > 600) && (height > 600)){
                        if(scroll.contentItem != itemNull) scroll.contentItem = itemNull
                        contener.width = width
                        contener.height = height
                } else if ((width < 600) && (height < 600)){
                        if(scroll.contentItem != contener) scroll.contentItem = contener
                        contener.width = 600
                        contener.height = 600
                } else if ((width < 600)){
                        if(scroll.contentItem != contener) scroll.contentItem = contener
                        contener.width = 600
                        contener.height = height
                } else {
                        if(scroll.contentItem != contener) scroll.contentItem = contener
                        contener.height = 600
                        contener.width = width
                }
        }
 
	onWidthChanged: scrollChange()
	onHeightChanged: scrollChange()
 
	ScrollView {
		id : scroll
		anchors.fill : parent
	}
 
	Item{id :itemNull}
 
	Rectangle {
		id: contener
		width : 600
		height: 600
		GridLayout {
			id: grid
			columns: 3
			anchors.fill :contener
			Rectangle { color : "blue" ; Layout.fillHeight: true ; Layout.fillWidth: true }
			Rectangle { color : "green"  ; Layout.fillHeight: true ; Layout.fillWidth: true}
			Rectangle { color : "red"  ; Layout.fillHeight: true ; Layout.fillWidth: true}
			Rectangle { color : "yellow"  ; Layout.fillHeight: true ; Layout.fillWidth: true}
			Rectangle { color : "black"  ; Layout.fillHeight: true ; Layout.fillWidth: true}
			Rectangle { color : "brown"  ; Layout.fillHeight: true ; Layout.fillWidth: true}
		}
	}
}

En fait je ne suis pas certain d'avoir compris la question.

23/01/2015, 14h23
Jiyuu

:salut:

Et bien je te rassure... tu as tout à fait compris ma question.
C'est exactement ce résultat que je cherchais ;)

Il ne me reste plus qu'à l'adapter à mon appli.

Merci à toi.