[SOLVED] QML: GridView and spacing between children
-
wrote on 12 Sept 2012, 09:47 last edited by
How to set the spacing between the children of gridview in QML?
@
// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.0Rectangle
{
signal selected(string sezione) //[PATHiMMAGINI]/Deutschland <-> [PATHiMMAGINI]/Italiaproperty int lunghezza: 600 property int altezza: 400 color: "transparent" width: lunghezza - 60 height: altezza - 30 GridView { anchors.fill: parent highlight: Rectangle { radius: 5; color: "lightsteelblue" } model: modelSezioni delegate: Flipable { property bool flipped: false id: flipableCard width: 105 height: 70 front: Image { source: bandiera1; id: img1; anchors.centerIn: parent } back: Image { id: img2; source: bandiera2; anchors.centerIn: parent } transform: Rotation { id: rotation angle: 0 origin.x: flipableCard.width / 2 origin.y: flipableCard.height / 2 axis.x: 1 //questo flipable girerĂ sull'asse x, in verticale axis.z: 0 axis.y: 0 } Timer { interval: intervalloDiRotazione repeat: true running: true onTriggered: { flipableCard.flipped = !flipableCard.flipped; } } states: State { name: "back" when: flipableCard.flipped PropertyChanges { target: rotation; angle: 180 } } transitions: Transition { NumberAnimation { target: rotation; property: "angle"; duration: 1500 } } MouseArea { anchors.fill: parent onClicked: { selected(bandiera1 + " <-> " + bandiera2); } } } }
}
@ -
wrote on 12 Sept 2012, 16:15 last edited by
afaik, gridview dose not have 'spacing' properties.
but i think you can effectively set a spacing by using cellWidth, cellHeight property, delegate's width/height
like,,,@
GridView {
...
cellHeight: 110
cellWidth:110delegate : Item {
x:10
y: 10
width: 100
height: 100
....
}
}
@or how about using delegates as nested Item
like..@
GridView {
......
delegate : Item {
width:110
height: 110Item { width: 100 height: 100 anchors.centerIn:parent ... }
}
@ -
wrote on 12 Sept 2012, 19:42 last edited by
Thank you
this is enough for that:
@
GridView
{
cellWidth:100
cellHeight:100
...
}
@ -
afaik, gridview dose not have 'spacing' properties.
but i think you can effectively set a spacing by using cellWidth, cellHeight property, delegate's width/height
like,,,@
GridView {
...
cellHeight: 110
cellWidth:110delegate : Item {
x:10
y: 10
width: 100
height: 100
....
}
}
@or how about using delegates as nested Item
like..@
GridView {
......
delegate : Item {
width:110
height: 110Item { width: 100 height: 100 anchors.centerIn:parent ... }
}
@wrote on 17 Jul 2023, 17:46 last edited byUsing cell width & cell height is not the same thing as a vertical / horizontal spacing. For example if you set cell width to the desired width plus the desired horizontal spacing, then you end up with an extra unwanted spacing on the end cells. It kind of boggles my mind how such basic functionality is not included, and nobody complains.